Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
An HTML5 responsive experiment of Breaking Bad serie intro.

Made with
https://ita-design-system.github.io/bricss/
https://github.com/olivier3lanc/Scroll-Btween

Credits: https://www.sonypictures.com/tv/breakingbad

Fonts: AtticAntique, HeartBreakingBad, SFPro
-->

<div class="pos-fixed bottom-0 left-0 | w-100 h-100 | bg-2"></div>

<div class="pos-fixed bottom-0 left-0 | w-100 h-100 | opa-7 bg-4 mbm-multiply"></div>
<div class="pos-fixed bottom-0 left-0 | w-100 h-100 | opa-0 bg-4 mbm-overlay"
     style="animation: smoke 5s linear 0s infinite forwards;"></div>
<div class="pos-fixed bottom-0 left-0 | w-100 h-100 | opa-0 bg-4 mbm-overlay"
     style="animation: smoke 5s linear 2.5s infinite forwards;"></div>

<header class="d-flex | pos-fixed top-50 left-50 t-tX-50 t-tY-50 z-3">
    <h1 class="d-flex fd-column | m-0 | ff-400"
        scroll-btween="header"
        data-detector="final_text_detector"
        data-transform="perspective(800px) translateZ(|0 to -400|px)">
        
        <span class="d-flex ai-center | pos-relative">
            
            <span class="d-flex | pos-relative | p-8 ar-1"
                  p-7="xs"
                  scroll-btween="table1"
                  data-detector="table1_detector"
                  data-transform="perspective(1400px) translateZ(|500 to -500|px)"
                  data-opacity="|0:0 to 50:0.5 to 60:0.3 to 100:0|">
            </span>
            
            <span class="d-flex | pos-absolute top-0 left-0 z-1 | p-8 ar-1 | bg-1 outl-1"
                  p-7="xs"
                  scroll-btween="br"
                  data-detector="table1_detector"
                  data-opacity="|0:0 to 40:0 to 50:0.8 to 100:1|">
                <span class="d-flex jc-space-between | pos-absolute top-0 left-0 | w-100 p-1">
                    <code class="ff-400 fs-1">79.904</code>
                    <code class="maxw-2ch | ff-400 fs-1 ta-right">+5 +3 +1 -1</code>
                </span>
                <span class="d-flex fd-column | pos-absolute bottom-0 left-0 | p-1 | fs-2">
                    <span class="d-flex fd-column">
                        <code class="ff-700">35</code>
                        <code class="ff-400 fs-1">2-8-18-7</code>
                    </span>
                </span>
                <span class="pos-absolute top-50 left-50 t-tY-50 t-tX-50 | mt-offset-1 | ff-700 fs-8 ta-center" fs-7="xs">Br</span>
            </span>
            
            <span class="pl-2 mt-offset-2 | ff-heart fs-10 lh-special-1 | c-0 bsize-cover bpos-center | __rust"
                  scroll-btween="eaking"
                  data-detector="final_text_detector"
                  data-opacity="|0:0 to 20:1 to 100:1|"
                  fs-9="xs">
                eaking
            </span>
        </span>

<span class="d-flex ai-center | pos-relative | ml-special-1 mt-2px"
              ml-special-2="xs">
            
            <span class="d-flex | pos-relative | p-8 ar-1"
                  p-7="xs"
                  scroll-btween="table2"
                  data-detector="table2_detector"
                  data-transform="perspective(1400px) translateZ(|500 to -500|px)"
                  data-opacity="|0:0 to 50:0.5 to 100:0|">
            </span>
            
            <span class="d-flex | pos-absolute top-0 left-0 | p-8 ar-1 | bg-1 outl-1"
                  p-7="xs"
                  scroll-btween="ba"
                  data-detector="table2_detector"
                  data-opacity="|0:0 to 40:0 to 50:0.8 to 100:1|">
                <span class="d-flex jc-space-between | pos-absolute top-0 left-0 | w-100 p-1">
                    <code class="ff-400 fs-1">137.3277</code>
                    <code class="maxw-2ch | ff-400 fs-1 ta-right">+2</code>
                </span>
                <span class="d-flex fd-column | pos-absolute bottom-0 left-0 | p-1 | fs-2">
                    <span class="d-flex fd-column">
                        <code class="ff-700">56</code>
                        <code class="ff-400 fs-1">2-8-18-18-8-2</code>
                    </span>
                </span>
                <span class="pos-absolute top-50 left-50 t-tY-50 t-tX-50 | mt-offset-1 | ff-700 fs-8 ta-center" fs-7="xs">Ba</span>
            </span>
            
            <span class="pl-2 mt-offset-2 | ff-heart fs-10 lh-special-1 | c-0 bsize-cover bpos-center | __rust"
                  fs-9="xs"
                  scroll-btween="d"
                  data-detector="final_text_detector"
                  data-opacity="|0:0 to 20:1 to 100:1|">
                d
            </span>
        </span>
    </h1>
</header>

<ul class="pos-fixed bottom-0 left-0 | w-100 h-100 p-0 m-0 | ls-none"
    style="perspective: 800px;"
    scroll-btween="formulaes"
    data-detector="table1_detector"
    data-opacity="|0:1 to 30:0 to 100:0|" d-none="xs">
    <li class="pos-fixed | fs-8 ff-formulae | opa-0" style="top: 40%; left: 50%; animation: formulae1 15s linear 0s infinite forwards;">C<sub>5</sub> H<sub>10</sub> N</li>
    <li class="pos-fixed | fs-6 ff-formulae | opa-0" style="top: 20%; left: 80%; animation: formulae2 10s linear 1s infinite forwards;">C<sub>5</sub> H<sub>10</sub> N</li>
    <li class="pos-fixed | fs-5 ff-formulae | opa-0" style="top: 45%; left: 45%; animation: formulae2 12s linear 2s infinite forwards;">C<sub>5</sub> H<sub>10</sub> N</li>
    <li class="pos-fixed | fs-8 ff-formulae | opa-0" style="top: 60%; left: 15%; animation: formulae1 9s linear 0s infinite forwards;">C<sub>5</sub></li>
    <li class="pos-fixed | fs-7 ff-formulae | opa-0" style="top: 80%; left: 35%; animation: formulae1 12s linear 2s infinite forwards;">C<sub>5</sub></li>
    <li class="pos-fixed | fs-10 ff-formulae | opa-0" style="top: 20%; left: 20%; animation: formulae1 15s linear 3s infinite forwards;">H<sub>10</sub></li>
    <li class="pos-fixed | fs-10 ff-formulae | opa-0" style="top: 60%; left: 80%; animation: formulae2 10s linear 1s infinite forwards;">H<sub>10</sub></li>
    <li class="pos-fixed | fs-9 ff-formulae | opa-0" style="top: 10%; left: 55%; animation: formulae1 7s linear 1s infinite forwards;">N</li>
    <li class="pos-fixed | fs-8 ff-formulae | opa-0" style="top: 60%; left: 25%; animation: formulae2 10s linear 3s infinite forwards;">N</li>
    <li class="pos-fixed | fs-7 ff-formulae | opa-0" style="top: 30%; left: 60%; animation: formulae2 8s linear 2s infinite forwards;">149.24</li>
    <li class="pos-fixed | fs-6 ff-formulae | opa-0" style="top: 60%; left: 20%; animation: formulae1 5s linear 4s infinite forwards;">149.24</li>
    <li class="pos-fixed | fs-5 ff-formulae | opa-0" style="top: 20%; left: 20%; animation: formulae1 5s linear 4s infinite forwards;">meth</li>
    <li class="pos-fixed | fs-4 ff-formulae | opa-0" style="top: 60%; left: 50%; animation: formulae2 7s linear 2s infinite forwards;">meth</li>
</ul>

<p class="d-flex fd-column ai-center jc-center | pos-fixed top-0 left-0 | w-100 h-100 m-0"
   scroll-btween="sc"
   data-detector="table1_detector"
   data-opacity="|0:1 to 30:0 to 100:0|"
   data-transform="perspective(800px) translateZ(-|0:0 to 30:700 to 100:700|px)">
    
    <span class="d-flex ai-center jc-center">
        
        <span class="d-flex | pos-relative | p-8 ar-1 | bg-1 outl-1"
              p-7="xs">
            <span class="d-flex jc-space-between | pos-absolute top-0 left-0 | w-100 p-1">
                <code class="ff-400 fs-1">44.9559085</code>
                <code class="maxw-2ch | ff-400 fs-1 ta-right">+3</code>
            </span>
            <span class="d-flex fd-column | pos-absolute bottom-0 left-0 | p-1 | fs-2">
                <span class="d-flex fd-column">
                    <code class="ff-700">21</code>
                    <code class="ff-400 fs-1">2-8-9-2</code>
                </span>
            </span>
            <span class="pos-absolute top-50 left-50 t-tY-50 t-tX-50 | mt-offset-1 | ff-700 fs-8 ta-center" fs-7="xs">Sc</span>
        </span>
        
        <span class="pos-relative | pl-8 pr-8 mt-offset-2 | ff-heart fs-10 lh-0"
              pl-7="xs"
              pr-7="xs"
              fs-8="xs">
            <span class="pos-absolute top-50 left-0 t-tY-50 | pl-2 | lh-special-1 | c-0 bsize-cover bpos-center | __rust">roll</span>
        </span>
    </span>
    
    <span class="d-flex ai-center jc-center">
        
        <span class="pos-relative | pl-8 pr-8 | ff-heart fs-10 lh-0"
              pl-7="xs"
              pr-7="xs"
              fs-8="xs">
            <span class="pos-absolute top-50 right-0 t-tY-50 | pr-2 | lh-special-1 | c-0 bsize-cover bpos-center | __rust">dow</span>
        </span>
        
        <span class="d-flex | pos-relative | p-8 mt-2px ml-1 ar-1 | bg-1 outl-1"
              p-7="xs">
            <span class="d-flex jc-space-between | pos-absolute top-0 left-0 | w-100 p-1">
                <code class="ff-400 fs-1">14.007</code>
                <code class="maxw-2ch | ff-400 fs-1 ta-right">+4 +3 -3</code>
            </span>
            <span class="d-flex fd-column | pos-absolute bottom-0 left-0 | p-1 | fs-2">
                <span class="d-flex fd-column">
                    <code class="ff-700">7</code>
                    <code class="ff-400 fs-1">2-5</code>
                </span>
            </span>
            <span class="pos-absolute top-50 left-50 t-tY-50 t-tX-50 | mt-offset-1 | ff-700 fs-8 ta-center" fs-7="xs">N</span>
        </span>
    </span>
</p>

<menu class="d-flex ai-center jc-space-between | pos-fixed bottom-0 left-0 z-3 | w-100 p-0 m-0 | ls-none">
    <li id="audio_commands"></li>
    <li class="d-flex | fs-2 p-5">
        <a  href="https://www.sonypictures.com/tv/breakingbad"
           class="td-none"
           target="_blank"
           title="Open Breaking Bad’s Official Page on a new tab">
            ©
            Breaking Bad<svg style="height: 1em" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                             stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link">
            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
            <polyline points="15 3 21 3 21 9"></polyline>
            <line x1="10" y1="14" x2="21" y2="3"></line>
            </svg>
        </a>
    </li>
    <li class="pos-fixed top-0 right-0">
        <button type="button"
                class="p-5 | ff-700 fs-4 | c-neutral-100 bc-0 b-0 cur-pointer"
                onclick="bb.toggleFullScreen(this)">
            Enter Full<span class="c-secondary-100">Sc</span>reen
        </button>
    </li>
</menu>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
@font-face {
    font-family: "BreakingBad";
    src: url("https://cdn.jsdelivr.net/gh/olivier3lanc/cinematics-resources/breaking_bad_intro/heartBB.woff2") format("woff2");
    font-style: normal;
    font-display: swap;
    font-weight: 400
}
@font-face {
    font-family: "SFPro-Regular";
    src: url("https://cdn.jsdelivr.net/gh/olivier3lanc/cinematics-resources/breaking_bad_intro/SFProDisplay-Regular.woff2") format("woff2");
    font-style: normal;
    font-display: swap;
    font-weight: 400
}
@font-face {
    font-family: "SFPro-Bold";
    src: url("https://cdn.jsdelivr.net/gh/olivier3lanc/cinematics-resources/breaking_bad_intro/SFProDisplay-Bold.woff2") format("woff2");
    font-style: normal;
    font-display: swap;
    font-weight: 700
}
@font-face {
    font-family: "AtticAntique";
    src: url("https://cdn.jsdelivr.net/gh/olivier3lanc/cinematics-resources/breaking_bad_intro/AtticAntique.woff2") format("woff2");
    font-style: normal;
    font-display: swap;
    font-weight: 400
}
.ff-heart {
    font-weight: 400;
}
.ff-400 {
    font-weight: 400;
}
.ff-700 {
    font-weight: 700;
}
.ff-formulae {
    font-weight: 400;
}

/*
    Generated by BRiCSS
    A simple and customizable low-level CSS library generator
    https://ita-design-system.github.io/bricss/
*/

:root {
  /* BRiCSS CSS variables start with --bricss- */
  --bricss-colors-neutral-100: white;
  --bricss-colors-neutral-200: black;
  --bricss-colors-primary-100: #284b24;
  --bricss-colors-primary-200: #064117;
  --bricss-colors-primary-300: #011905;
  --bricss-colors-secondary-100: #4ea281;
  --bricss-colors-secondary-200: #37714F;
  --bricss-colors-secondary-300: #1f401d;
  --bricss-fontFamilies-400: SFPro-Regular;
  --bricss-fontFamilies-700: SFPro-Bold;
  --bricss-fontFamilies-heart: BreakingBad, sans-serif;
  --bricss-fontFamilies-formulae: AtticAntique;
  --bricss-fontFamilies-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
  --bricss-fontSizes-1: 10px;
  --bricss-fontSizes-2: 12px;
  --bricss-fontSizes-3: 14px;
  --bricss-fontSizes-4: 16px;
  --bricss-fontSizes-5: 24px;
  --bricss-fontSizes-6: 36px;
  --bricss-fontSizes-7: 58px;
  --bricss-fontSizes-8: 84px;
  --bricss-fontSizes-9: 98px;
  --bricss-fontSizes-10: 130px;
  --bricss-spacings-1: 4px;
  --bricss-spacings-2: 8px;
  --bricss-spacings-3: 12px;
  --bricss-spacings-4: 16px;
  --bricss-spacings-5: 24px;
  --bricss-spacings-6: 32px;
  --bricss-spacings-7: 48px;
  --bricss-spacings-8: 64px;
  --bricss-spacings-9: 96px;
}

.d-flex {
  display: flex;
}
.u-d-flex {
  display: flex !important;
}
.d-inline-flex {
  display: inline-flex;
}
.u-d-inline-flex {
  display: inline-flex !important;
}
.d-none {
  display: none;
}
.u-d-none {
  display: none !important;
}
.ai-baseline {
  align-items: baseline;
}
.ai-center {
  align-items: center;
}
.ai-start {
  align-items: flex-start;
}
.ai-end {
  align-items: flex-end;
}
.jc-center {
  justify-content: center;
}
.jc-space-between {
  justify-content: space-between;
}
.jc-space-around {
  justify-content: space-around;
}
.jc-start {
  justify-content: flex-start;
}
.jc-end {
  justify-content: flex-end;
}
.fd-column {
  flex-direction: column;
}
.fw-wrap {
  flex-wrap: wrap;
}
.order--1 {
  order: -1;
}
.pos-relative {
  position: relative;
}
.pos-absolute {
  position: absolute;
}
.pos-fixed {
  position: fixed;
}
.pos-sticky {
  position: sticky;
}
.top-0 {
  top: 0%;
}
.top-50 {
  top: 50%;
}
.top-100 {
  top: 100%;
}
.top-42px {
  top: 42px;
}
.right-0 {
  right: 0%;
}
.right-50 {
  right: 50%;
}
.right-100 {
  right: 100%;
}
.bottom-0 {
  bottom: 0%;
}
.bottom-50 {
  bottom: 50%;
}
.bottom-100 {
  bottom: 100%;
}
.left-0 {
  left: 0%;
}
.left-50 {
  left: 50%;
}
.left-100 {
  left: 100%;
}
.z-1 {
  z-index: 1;
}
.z-2 {
  z-index: 2;
}
.z-3 {
  z-index: 3;
}
.z-4 {
  z-index: 4;
}
.z-5 {
  z-index: 5;
}
.z-6 {
  z-index: 6;
}
.z-7 {
  z-index: 7;
}
.z-8 {
  z-index: 8;
}
.z-9 {
  z-index: 9;
}
.t-tX-50 {
  --dsg-tX: -50%;
}
.t-tX50 {
  --dsg-tX: 50%;
}
.t-tX-100 {
  --dsg-tX: -100%;
}
.t-tX100 {
  --dsg-tX: 100%;
}
.t-tY-50 {
  --dsg-tY: -50%;
}
.t-tY50 {
  --dsg-tY: 50%;
}
.t-tY-100 {
  --dsg-tY: -100%;
}
.t-tY100 {
  --dsg-tY: 100%;
}
.t-tX-50 {
  transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0));
}
.t-tX50 {
  transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0));
}
.t-tX-100 {
  transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0));
}
.t-tX100 {
  transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0));
}
.t-tY-50 {
  transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0));
}
.t-tY50 {
  transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0));
}
.t-tY-100 {
  transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0));
}
.t-tY100 {
  transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0));
}
.gap-1 {
  gap: var(--bricss-spacings-1, 4px);
}
.gap-2 {
  gap: var(--bricss-spacings-2, 8px);
}
.gap-3 {
  gap: var(--bricss-spacings-3, 12px);
}
.gap-4 {
  gap: var(--bricss-spacings-4, 16px);
}
.gap-5 {
  gap: var(--bricss-spacings-5, 24px);
}
.gap-6 {
  gap: var(--bricss-spacings-6, 32px);
}
.gap-7 {
  gap: var(--bricss-spacings-7, 48px);
}
.gap-8 {
  gap: var(--bricss-spacings-8, 64px);
}
.gap-9 {
  gap: var(--bricss-spacings-9, 96px);
}
.gap-1 {
  --dsg-gap: var(--bricss-spacings-1, 4px);
}
.gap-2 {
  --dsg-gap: var(--bricss-spacings-2, 8px);
}
.gap-3 {
  --dsg-gap: var(--bricss-spacings-3, 12px);
}
.gap-4 {
  --dsg-gap: var(--bricss-spacings-4, 16px);
}
.gap-5 {
  --dsg-gap: var(--bricss-spacings-5, 24px);
}
.gap-6 {
  --dsg-gap: var(--bricss-spacings-6, 32px);
}
.gap-7 {
  --dsg-gap: var(--bricss-spacings-7, 48px);
}
.gap-8 {
  --dsg-gap: var(--bricss-spacings-8, 64px);
}
.gap-9 {
  --dsg-gap: var(--bricss-spacings-9, 96px);
}
.fg-1 {
  flex-grow: 1;
}
.w-100 {
  width: 100%;
}
.w-auto {
  width: auto;
}
.h-100 {
  height: 100%;
}
.h-auto {
  height: auto;
}
.h-100vh {
  height: 100vh;
}
.maxw-2ch {
  max-width: 2ch;
}
.maxh-100 {
  max-height: 100%;
}
.maxh-100vh {
  max-height: 100vh;
}
.maxh-80vh {
  max-height: 80vh;
}
.maxh-50vh {
  max-height: 50vh;
}
.minh-100vh {
  min-height: 100vh;
}
.ar-1 {
  aspect-ratio: 1;
}
.o-auto {
  overflow: auto;
}
.o-hidden {
  overflow: hidden;
}
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: var(--bricss-spacings-1, 4px);
}
.p-2 {
  padding: var(--bricss-spacings-2, 8px);
}
.p-3 {
  padding: var(--bricss-spacings-3, 12px);
}
.p-4 {
  padding: var(--bricss-spacings-4, 16px);
}
.p-5 {
  padding: var(--bricss-spacings-5, 24px);
}
.p-6 {
  padding: var(--bricss-spacings-6, 32px);
}
.p-7 {
  padding: var(--bricss-spacings-7, 48px);
}
.p-8 {
  padding: var(--bricss-spacings-8, 64px);
}
.p-9 {
  padding: var(--bricss-spacings-9, 96px);
}
.pt-0 {
  padding-top: 0px;
}
.pt-1 {
  padding-top: var(--bricss-spacings-1, 4px);
}
.pt-2 {
  padding-top: var(--bricss-spacings-2, 8px);
}
.pt-3 {
  padding-top: var(--bricss-spacings-3, 12px);
}
.pt-4 {
  padding-top: var(--bricss-spacings-4, 16px);
}
.pt-5 {
  padding-top: var(--bricss-spacings-5, 24px);
}
.pt-6 {
  padding-top: var(--bricss-spacings-6, 32px);
}
.pt-7 {
  padding-top: var(--bricss-spacings-7, 48px);
}
.pt-8 {
  padding-top: var(--bricss-spacings-8, 64px);
}
.pt-9 {
  padding-top: var(--bricss-spacings-9, 96px);
}
.pr-0 {
  padding-right: 0px;
}
.pr-1 {
  padding-right: var(--bricss-spacings-1, 4px);
}
.pr-2 {
  padding-right: var(--bricss-spacings-2, 8px);
}
.pr-3 {
  padding-right: var(--bricss-spacings-3, 12px);
}
.pr-4 {
  padding-right: var(--bricss-spacings-4, 16px);
}
.pr-5 {
  padding-right: var(--bricss-spacings-5, 24px);
}
.pr-6 {
  padding-right: var(--bricss-spacings-6, 32px);
}
.pr-7 {
  padding-right: var(--bricss-spacings-7, 48px);
}
.pr-8 {
  padding-right: var(--bricss-spacings-8, 64px);
}
.pr-9 {
  padding-right: var(--bricss-spacings-9, 96px);
}
.pb-0 {
  padding-bottom: 0px;
}
.pb-1 {
  padding-bottom: var(--bricss-spacings-1, 4px);
}
.pb-2 {
  padding-bottom: var(--bricss-spacings-2, 8px);
}
.pb-3 {
  padding-bottom: var(--bricss-spacings-3, 12px);
}
.pb-4 {
  padding-bottom: var(--bricss-spacings-4, 16px);
}
.pb-5 {
  padding-bottom: var(--bricss-spacings-5, 24px);
}
.pb-6 {
  padding-bottom: var(--bricss-spacings-6, 32px);
}
.pb-7 {
  padding-bottom: var(--bricss-spacings-7, 48px);
}
.pb-8 {
  padding-bottom: var(--bricss-spacings-8, 64px);
}
.pb-9 {
  padding-bottom: var(--bricss-spacings-9, 96px);
}
.pl-0 {
  padding-left: 0px;
}
.pl-1 {
  padding-left: var(--bricss-spacings-1, 4px);
}
.pl-2 {
  padding-left: var(--bricss-spacings-2, 8px);
}
.pl-3 {
  padding-left: var(--bricss-spacings-3, 12px);
}
.pl-4 {
  padding-left: var(--bricss-spacings-4, 16px);
}
.pl-5 {
  padding-left: var(--bricss-spacings-5, 24px);
}
.pl-6 {
  padding-left: var(--bricss-spacings-6, 32px);
}
.pl-7 {
  padding-left: var(--bricss-spacings-7, 48px);
}
.pl-8 {
  padding-left: var(--bricss-spacings-8, 64px);
}
.pl-9 {
  padding-left: var(--bricss-spacings-9, 96px);
}
.m-0 {
  margin: 0px;
}
.m-auto {
  margin: auto;
}
.m-1 {
  margin: var(--bricss-spacings-1, 4px);
}
.m-2 {
  margin: var(--bricss-spacings-2, 8px);
}
.m-3 {
  margin: var(--bricss-spacings-3, 12px);
}
.m-4 {
  margin: var(--bricss-spacings-4, 16px);
}
.m-5 {
  margin: var(--bricss-spacings-5, 24px);
}
.m-6 {
  margin: var(--bricss-spacings-6, 32px);
}
.m-7 {
  margin: var(--bricss-spacings-7, 48px);
}
.m-8 {
  margin: var(--bricss-spacings-8, 64px);
}
.m-9 {
  margin: var(--bricss-spacings-9, 96px);
}
.mt-0 {
  margin-top: 0px;
}
.mt-offset-1 {
  margin-top: -0.06em;
}
.mt-offset-2 {
  margin-top: 0.06em;
}
.mt-2px {
  margin-top: 2px;
}
.mt-1 {
  margin-top: var(--bricss-spacings-1, 4px);
}
.mt-2 {
  margin-top: var(--bricss-spacings-2, 8px);
}
.mt-3 {
  margin-top: var(--bricss-spacings-3, 12px);
}
.mt-4 {
  margin-top: var(--bricss-spacings-4, 16px);
}
.mt-5 {
  margin-top: var(--bricss-spacings-5, 24px);
}
.mt-6 {
  margin-top: var(--bricss-spacings-6, 32px);
}
.mt-7 {
  margin-top: var(--bricss-spacings-7, 48px);
}
.mt-8 {
  margin-top: var(--bricss-spacings-8, 64px);
}
.mt-9 {
  margin-top: var(--bricss-spacings-9, 96px);
}
.mr-0 {
  margin-right: 0px;
}
.mr-auto {
  margin-right: auto;
}
.mr-1 {
  margin-right: var(--bricss-spacings-1, 4px);
}
.mr-2 {
  margin-right: var(--bricss-spacings-2, 8px);
}
.mr-3 {
  margin-right: var(--bricss-spacings-3, 12px);
}
.mr-4 {
  margin-right: var(--bricss-spacings-4, 16px);
}
.mr-5 {
  margin-right: var(--bricss-spacings-5, 24px);
}
.mr-6 {
  margin-right: var(--bricss-spacings-6, 32px);
}
.mr-7 {
  margin-right: var(--bricss-spacings-7, 48px);
}
.mr-8 {
  margin-right: var(--bricss-spacings-8, 64px);
}
.mr-9 {
  margin-right: var(--bricss-spacings-9, 96px);
}
.mb-0 {
  margin-bottom: 0px;
}
.mb-1 {
  margin-bottom: var(--bricss-spacings-1, 4px);
}
.mb-2 {
  margin-bottom: var(--bricss-spacings-2, 8px);
}
.mb-3 {
  margin-bottom: var(--bricss-spacings-3, 12px);
}
.mb-4 {
  margin-bottom: var(--bricss-spacings-4, 16px);
}
.mb-5 {
  margin-bottom: var(--bricss-spacings-5, 24px);
}
.mb-6 {
  margin-bottom: var(--bricss-spacings-6, 32px);
}
.mb-7 {
  margin-bottom: var(--bricss-spacings-7, 48px);
}
.mb-8 {
  margin-bottom: var(--bricss-spacings-8, 64px);
}
.mb-9 {
  margin-bottom: var(--bricss-spacings-9, 96px);
}
.ml-0 {
  margin-left: 0px;
}
.ml-auto {
  margin-left: auto;
}
.ml-special-1 {
  margin-left: calc(2 * var(--bricss-spacings-8) + 2px);
}
.ml-special-2 {
  margin-left: calc(2 * var(--bricss-spacings-7) + 2px);
}
.ml-1 {
  margin-left: var(--bricss-spacings-1, 4px);
}
.ml-2 {
  margin-left: var(--bricss-spacings-2, 8px);
}
.ml-3 {
  margin-left: var(--bricss-spacings-3, 12px);
}
.ml-4 {
  margin-left: var(--bricss-spacings-4, 16px);
}
.ml-5 {
  margin-left: var(--bricss-spacings-5, 24px);
}
.ml-6 {
  margin-left: var(--bricss-spacings-6, 32px);
}
.ml-7 {
  margin-left: var(--bricss-spacings-7, 48px);
}
.ml-8 {
  margin-left: var(--bricss-spacings-8, 64px);
}
.ml-9 {
  margin-left: var(--bricss-spacings-9, 96px);
}
.ff-400 {
  font-family: var(--bricss-fontFamilies-400, SFPro-Regular);
}
.ff-700 {
  font-family: var(--bricss-fontFamilies-700, SFPro-Bold);
}
.ff-heart {
  font-family: var(--bricss-fontFamilies-heart, BreakingBad, sans-serif);
}
.ff-formulae {
  font-family: var(--bricss-fontFamilies-formulae, AtticAntique);
}
.ff-mono {
  font-family: var(--bricss-fontFamilies-mono, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace);
}
.fs-1 {
  font-size: var(--bricss-fontSizes-1, 10px);
}
.fs-2 {
  font-size: var(--bricss-fontSizes-2, 12px);
}
.fs-3 {
  font-size: var(--bricss-fontSizes-3, 14px);
}
.fs-4 {
  font-size: var(--bricss-fontSizes-4, 16px);
}
.fs-5 {
  font-size: var(--bricss-fontSizes-5, 24px);
}
.fs-6 {
  font-size: var(--bricss-fontSizes-6, 36px);
}
.fs-7 {
  font-size: var(--bricss-fontSizes-7, 58px);
}
.fs-8 {
  font-size: var(--bricss-fontSizes-8, 84px);
}
.fs-9 {
  font-size: var(--bricss-fontSizes-9, 98px);
}
.fs-10 {
  font-size: var(--bricss-fontSizes-10, 130px);
}
.ta-left {
  text-align: left;
}
.ta-center {
  text-align: center;
}
.ta-right {
  text-align: right;
}
.td-none {
  text-decoration: none;
}
.td-underline {
  text-decoration: underline;
}
.td-line-through {
  text-decoration: line-through;
}
.fstyle-normal {
  font-style: normal;
}
.fstyle-italic {
  font-style: italic;
}
.ws-nowrap {
  white-space: nowrap;
}
.to-ellipsis {
  text-overflow: ellipsis;
}
.lh-0 {
  line-height: 0em;
}
.lh-1 {
  line-height: 1em;
}
.lh-2 {
  line-height: 1.1em;
}
.lh-3 {
  line-height: 1.2em;
}
.lh-4 {
  line-height: 1.3em;
}
.lh-5 {
  line-height: 1.4em;
}
.lh-6 {
  line-height: 1.5em;
}
.lh-7 {
  line-height: 1.6em;
}
.lh-8 {
  line-height: 1.7em;
}
.lh-9 {
  line-height: 1.8em;
}
.lh-special-1 {
  line-height: 0.8em;
}
.va-top {
  vertical-align: top;
}
.va-middle {
  vertical-align: middle;
}
.va-bottom {
  vertical-align: bottom;
}
.va-super {
  vertical-align: super;
}
.va-sub {
  vertical-align: sub;
}
.wb-break-word {
  word-break: break-word;
}
.wb-break-all {
  word-break: break-all;
}
.tt-uppercase {
  text-transform: uppercase;
}
.tt-lowercase {
  text-transform: lowercase;
}
.bg-1 {
  background: linear-gradient(135deg, var(--bricss-colors-secondary-100), var(--bricss-colors-secondary-300));
}
.bg-2 {
  background: radial-gradient(ellipse at center, hsl(114deg 35% 22%) 0%, hsl(117deg 37% 21%) 8%, hsl(121deg 40% 20%) 14%, hsl(124deg 46% 19%) 20%, hsl(128deg 54% 17%) 26%, hsl(132deg 65% 16%) 33%, hsl(137deg 83% 14%) 39%, hsl(137deg 80% 13%) 47%, hsl(137deg 77% 11%) 55%, hsl(137deg 73% 10%) 64%, hsl(134deg 68% 9%) 74%, hsl(131deg 69% 7%) 86%, hsl(130deg 92% 5%) 100%);
}
.bg-3 {
  background: radial-gradient(ellipse at center, transparent, black);
}
.bg-4 {
  background: center / cover no-repeat url('https://cdn.jsdelivr.net/gh/olivier3lanc/cinematics-resources/breaking_bad_intro/cloud.avif');
}
.bc-0 {
  background-color: transparent;
}
.bc-neutral-100 {
  background-color: var(--bricss-colors-neutral-100, white);
}
.bc-neutral-200 {
  background-color: var(--bricss-colors-neutral-200, black);
}
.bc-primary-100 {
  background-color: var(--bricss-colors-primary-100, #284b24);
}
.bc-primary-200 {
  background-color: var(--bricss-colors-primary-200, #064117);
}
.bc-primary-300 {
  background-color: var(--bricss-colors-primary-300, #011905);
}
.bc-secondary-100 {
  background-color: var(--bricss-colors-secondary-100, #4ea281);
}
.bc-secondary-200 {
  background-color: var(--bricss-colors-secondary-200, #37714F);
}
.bc-secondary-300 {
  background-color: var(--bricss-colors-secondary-300, #1f401d);
}
.c-0 {
  color: transparent;
}
.c-neutral-100 {
  color: var(--bricss-colors-neutral-100, white);
}
.c-neutral-200 {
  color: var(--bricss-colors-neutral-200, black);
}
.c-primary-100 {
  color: var(--bricss-colors-primary-100, #284b24);
}
.c-primary-200 {
  color: var(--bricss-colors-primary-200, #064117);
}
.c-primary-300 {
  color: var(--bricss-colors-primary-300, #011905);
}
.c-secondary-100 {
  color: var(--bricss-colors-secondary-100, #4ea281);
}
.c-secondary-200 {
  color: var(--bricss-colors-secondary-200, #37714F);
}
.c-secondary-300 {
  color: var(--bricss-colors-secondary-300, #1f401d);
}
.mbm-multiply {
  mix-blend-mode: multiply;
}
.mbm-overlay {
  mix-blend-mode: overlay;
}
.b-0 {
  border: none;
}
.bt-0 {
  border-top: none;
}
.br-0 {
  border-right: none;
}
.bb-0 {
  border-bottom: none;
}
.bl-0 {
  border-left: none;
}
.bwidth-1 {
  border-width: 1px;
}
.bwidth-2 {
  border-width: 2px;
}
.bwidth-3 {
  border-width: 3px;
}
.btwidth-0 {
  border-top-width: 0px;
}
.btwidth-1 {
  border-top-width: 1px;
}
.btwidth-2 {
  border-top-width: 2px;
}
.btwidth-3 {
  border-top-width: 3px;
}
.brwidth-0 {
  border-right-width: 0px;
}
.brwidth-1 {
  border-right-width: 1px;
}
.brwidth-2 {
  border-right-width: 2px;
}
.brwidth-3 {
  border-right-width: 3px;
}
.bbwidth-0 {
  border-bottom-width: 0px;
}
.bbwidth-1 {
  border-bottom-width: 1px;
}
.bbwidth-2 {
  border-bottom-width: 2px;
}
.bbwidth-3 {
  border-bottom-width: 3px;
}
.blwidth-0 {
  border-left-width: 0px;
}
.blwidth-1 {
  border-left-width: 1px;
}
.blwidth-2 {
  border-left-width: 2px;
}
.blwidth-3 {
  border-left-width: 3px;
}
.bstyle-solid {
  border-style: solid;
}
.bstyle-dashed {
  border-style: dashed;
}
.bstyle-none {
  border-style: none;
}
.btstyle-solid {
  border-top-style: solid;
}
.btstyle-dashed {
  border-top-style: dashed;
}
.btstyle-none {
  border-top-style: none;
}
.brstyle-solid {
  border-right-style: solid;
}
.brstyle-dashed {
  border-right-style: dashed;
}
.brstyle-none {
  border-right-style: none;
}
.bbstyle-solid {
  border-bottom-style: solid;
}
.bbstyle-dashed {
  border-bottom-style: dashed;
}
.bbstyle-none {
  border-bottom-style: none;
}
.blstyle-solid {
  border-left-style: solid;
}
.blstyle-dashed {
  border-left-style: dashed;
}
.blstyle-none {
  border-left-style: none;
}
.bcolor-neutral-100 {
  border-color: var(--bricss-colors-neutral-100, white);
}
.bcolor-neutral-200 {
  border-color: var(--bricss-colors-neutral-200, black);
}
.bcolor-primary-100 {
  border-color: var(--bricss-colors-primary-100, #284b24);
}
.bcolor-primary-200 {
  border-color: var(--bricss-colors-primary-200, #064117);
}
.bcolor-primary-300 {
  border-color: var(--bricss-colors-primary-300, #011905);
}
.bcolor-secondary-100 {
  border-color: var(--bricss-colors-secondary-100, #4ea281);
}
.bcolor-secondary-200 {
  border-color: var(--bricss-colors-secondary-200, #37714F);
}
.bcolor-secondary-300 {
  border-color: var(--bricss-colors-secondary-300, #1f401d);
}
.brad-0 {
  border-radius: 0px;
}
.brad-1 {
  border-radius: 3px;
}
.brad-2 {
  border-radius: 6px;
}
.brad-3 {
  border-radius: 12px;
}
.brad-4 {
  border-radius: 100px;
}
.bradtl-0 {
  border-top-left-radius: 0px;
}
.bradtl-1 {
  border-top-left-radius: 3px;
}
.bradtl-2 {
  border-top-left-radius: 6px;
}
.bradtl-3 {
  border-top-left-radius: 12px;
}
.bradtl-4 {
  border-top-left-radius: 100px;
}
.bradtr-0 {
  border-top-right-radius: 0px;
}
.bradtr-1 {
  border-top-right-radius: 3px;
}
.bradtr-2 {
  border-top-right-radius: 6px;
}
.bradtr-3 {
  border-top-right-radius: 12px;
}
.bradtr-4 {
  border-top-right-radius: 100px;
}
.bradbr-0 {
  border-bottom-right-radius: 0px;
}
.bradbr-1 {
  border-bottom-right-radius: 3px;
}
.bradbr-2 {
  border-bottom-right-radius: 6px;
}
.bradbr-3 {
  border-bottom-right-radius: 12px;
}
.bradbr-4 {
  border-bottom-right-radius: 100px;
}
.bradbl-0 {
  border-bottom-left-radius: 0px;
}
.bradbl-1 {
  border-bottom-left-radius: 3px;
}
.bradbl-2 {
  border-bottom-left-radius: 6px;
}
.bradbl-3 {
  border-bottom-left-radius: 12px;
}
.bradbl-4 {
  border-bottom-left-radius: 100px;
}
.bsize-cover {
  background-size: cover;
}
.bsize-contain {
  background-size: contain;
}
.bpos-center {
  background-position: center;
}
.brep-no-repeat {
  background-repeat: no-repeat;
}
.brep-repeat-x {
  background-repeat: repeat-x;
}
.brep-repeat-y {
  background-repeat: repeat-y;
}
.bs-1 {
  box-shadow: 0px 0px 25px 5px rgba(0,0,0,0.5);
}
.cur-pointer {
  cursor: pointer;
}
.cur-help {
  cursor: help;
}
.opa-0 {
  opacity: 0;
}
.opa-1 {
  opacity: 0.1;
}
.opa-2 {
  opacity: 0.2;
}
.opa-3 {
  opacity: 0.3;
}
.opa-4 {
  opacity: 0.4;
}
.opa-5 {
  opacity: 0.5;
}
.opa-6 {
  opacity: 0.6;
}
.opa-7 {
  opacity: 0.7;
}
.opa-8 {
  opacity: 0.8;
}
.opa-9 {
  opacity: 0.9;
}
.ls-none {
  list-style: none;
}
.outl-1 {
  outline: 2px solid currentColor;
}
.pe-none {
  pointer-events: none;
}

/*START @media xs*/
@media (min-width: 0px) and (max-width: 599px) {

.d-flex--xs,
[d-flex*="xs"] {
  display: flex;
}
.u-d-flex--xs,
[u-d-flex*="xs"] {
  display: flex !important;
}
.d-inline-flex--xs,
[d-inline-flex*="xs"] {
  display: inline-flex;
}
.u-d-inline-flex--xs,
[u-d-inline-flex*="xs"] {
  display: inline-flex !important;
}
.d-none--xs,
[d-none*="xs"] {
  display: none;
}
.u-d-none--xs,
[u-d-none*="xs"] {
  display: none !important;
}
.ai-baseline--xs,
[ai-baseline*="xs"] {
  align-items: baseline;
}
.ai-center--xs,
[ai-center*="xs"] {
  align-items: center;
}
.ai-start--xs,
[ai-start*="xs"] {
  align-items: flex-start;
}
.ai-end--xs,
[ai-end*="xs"] {
  align-items: flex-end;
}
.jc-center--xs,
[jc-center*="xs"] {
  justify-content: center;
}
.jc-space-between--xs,
[jc-space-between*="xs"] {
  justify-content: space-between;
}
.jc-space-around--xs,
[jc-space-around*="xs"] {
  justify-content: space-around;
}
.jc-start--xs,
[jc-start*="xs"] {
  justify-content: flex-start;
}
.jc-end--xs,
[jc-end*="xs"] {
  justify-content: flex-end;
}
.fd-column--xs,
[fd-column*="xs"] {
  flex-direction: column;
}
.fw-wrap--xs,
[fw-wrap*="xs"] {
  flex-wrap: wrap;
}
.order--1--xs,
[order--1*="xs"] {
  order: -1;
}
.pos-relative--xs,
[pos-relative*="xs"] {
  position: relative;
}
.pos-absolute--xs,
[pos-absolute*="xs"] {
  position: absolute;
}
.pos-fixed--xs,
[pos-fixed*="xs"] {
  position: fixed;
}
.pos-sticky--xs,
[pos-sticky*="xs"] {
  position: sticky;
}
.top-0--xs,
[top-0*="xs"] {
  top: 0%;
}
.top-50--xs,
[top-50*="xs"] {
  top: 50%;
}
.top-100--xs,
[top-100*="xs"] {
  top: 100%;
}
.top-42px--xs,
[top-42px*="xs"] {
  top: 42px;
}
.right-0--xs,
[right-0*="xs"] {
  right: 0%;
}
.right-50--xs,
[right-50*="xs"] {
  right: 50%;
}
.right-100--xs,
[right-100*="xs"] {
  right: 100%;
}
.bottom-0--xs,
[bottom-0*="xs"] {
  bottom: 0%;
}
.bottom-50--xs,
[bottom-50*="xs"] {
  bottom: 50%;
}
.bottom-100--xs,
[bottom-100*="xs"] {
  bottom: 100%;
}
.left-0--xs,
[left-0*="xs"] {
  left: 0%;
}
.left-50--xs,
[left-50*="xs"] {
  left: 50%;
}
.left-100--xs,
[left-100*="xs"] {
  left: 100%;
}
.z-1--xs,
[z-1*="xs"] {
  z-index: 1;
}
.z-2--xs,
[z-2*="xs"] {
  z-index: 2;
}
.z-3--xs,
[z-3*="xs"] {
  z-index: 3;
}
.z-4--xs,
[z-4*="xs"] {
  z-index: 4;
}
.z-5--xs,
[z-5*="xs"] {
  z-index: 5;
}
.z-6--xs,
[z-6*="xs"] {
  z-index: 6;
}
.z-7--xs,
[z-7*="xs"] {
  z-index: 7;
}
.z-8--xs,
[z-8*="xs"] {
  z-index: 8;
}
.z-9--xs,
[z-9*="xs"] {
  z-index: 9;
}
.t-tX-50--xs,
[t-tX-50*="xs"] {
  --dsg-tX: -50%;
}
.t-tX50--xs,
[t-tX50*="xs"] {
  --dsg-tX: 50%;
}
.t-tX-100--xs,
[t-tX-100*="xs"] {
  --dsg-tX: -100%;
}
.t-tX100--xs,
[t-tX100*="xs"] {
  --dsg-tX: 100%;
}
.t-tY-50--xs,
[t-tY-50*="xs"] {
  --dsg-tY: -50%;
}
.t-tY50--xs,
[t-tY50*="xs"] {
  --dsg-tY: 50%;
}
.t-tY-100--xs,
[t-tY-100*="xs"] {
  --dsg-tY: -100%;
}
.t-tY100--xs,
[t-tY100*="xs"] {
  --dsg-tY: 100%;
}
.t-tX-50--xs,
[t-tX-50*="xs"] {
  transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0));
}
.t-tX50--xs,
[t-tX50*="xs"] {
  transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0));
}
.t-tX-100--xs,
[t-tX-100*="xs"] {
  transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0));
}
.t-tX100--xs,
[t-tX100*="xs"] {
  transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0));
}
.t-tY-50--xs,
[t-tY-50*="xs"] {
  transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0));
}
.t-tY50--xs,
[t-tY50*="xs"] {
  transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0));
}
.t-tY-100--xs,
[t-tY-100*="xs"] {
  transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0));
}
.t-tY100--xs,
[t-tY100*="xs"] {
  transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0));
}
.gap-1--xs,
[gap-1*="xs"] {
  gap: var(--bricss-spacings-1, 4px);
}
.gap-2--xs,
[gap-2*="xs"] {
  gap: var(--bricss-spacings-2, 8px);
}
.gap-3--xs,
[gap-3*="xs"] {
  gap: var(--bricss-spacings-3, 12px);
}
.gap-4--xs,
[gap-4*="xs"] {
  gap: var(--bricss-spacings-4, 16px);
}
.gap-5--xs,
[gap-5*="xs"] {
  gap: var(--bricss-spacings-5, 24px);
}
.gap-6--xs,
[gap-6*="xs"] {
  gap: var(--bricss-spacings-6, 32px);
}
.gap-7--xs,
[gap-7*="xs"] {
  gap: var(--bricss-spacings-7, 48px);
}
.gap-8--xs,
[gap-8*="xs"] {
  gap: var(--bricss-spacings-8, 64px);
}
.gap-9--xs,
[gap-9*="xs"] {
  gap: var(--bricss-spacings-9, 96px);
}
.gap-1--xs,
[gap-1*="xs"] {
  --dsg-gap: var(--bricss-spacings-1, 4px);
}
.gap-2--xs,
[gap-2*="xs"] {
  --dsg-gap: var(--bricss-spacings-2, 8px);
}
.gap-3--xs,
[gap-3*="xs"] {
  --dsg-gap: var(--bricss-spacings-3, 12px);
}
.gap-4--xs,
[gap-4*="xs"] {
  --dsg-gap: var(--bricss-spacings-4, 16px);
}
.gap-5--xs,
[gap-5*="xs"] {
  --dsg-gap: var(--bricss-spacings-5, 24px);
}
.gap-6--xs,
[gap-6*="xs"] {
  --dsg-gap: var(--bricss-spacings-6, 32px);
}
.gap-7--xs,
[gap-7*="xs"] {
  --dsg-gap: var(--bricss-spacings-7, 48px);
}
.gap-8--xs,
[gap-8*="xs"] {
  --dsg-gap: var(--bricss-spacings-8, 64px);
}
.gap-9--xs,
[gap-9*="xs"] {
  --dsg-gap: var(--bricss-spacings-9, 96px);
}
.fg-1--xs,
[fg-1*="xs"] {
  flex-grow: 1;
}
.w-100--xs,
[w-100*="xs"] {
  width: 100%;
}
.w-auto--xs,
[w-auto*="xs"] {
  width: auto;
}
.h-100--xs,
[h-100*="xs"] {
  height: 100%;
}
.h-auto--xs,
[h-auto*="xs"] {
  height: auto;
}
.h-100vh--xs,
[h-100vh*="xs"] {
  height: 100vh;
}
.maxw-2ch--xs,
[maxw-2ch*="xs"] {
  max-width: 2ch;
}
.maxh-100--xs,
[maxh-100*="xs"] {
  max-height: 100%;
}
.maxh-100vh--xs,
[maxh-100vh*="xs"] {
  max-height: 100vh;
}
.maxh-80vh--xs,
[maxh-80vh*="xs"] {
  max-height: 80vh;
}
.maxh-50vh--xs,
[maxh-50vh*="xs"] {
  max-height: 50vh;
}
.minh-100vh--xs,
[minh-100vh*="xs"] {
  min-height: 100vh;
}
.ar-1--xs,
[ar-1*="xs"] {
  aspect-ratio: 1;
}
.o-auto--xs,
[o-auto*="xs"] {
  overflow: auto;
}
.o-hidden--xs,
[o-hidden*="xs"] {
  overflow: hidden;
}
.p-0--xs,
[p-0*="xs"] {
  padding: 0px;
}
.p-1--xs,
[p-1*="xs"] {
  padding: var(--bricss-spacings-1, 4px);
}
.p-2--xs,
[p-2*="xs"] {
  padding: var(--bricss-spacings-2, 8px);
}
.p-3--xs,
[p-3*="xs"] {
  padding: var(--bricss-spacings-3, 12px);
}
.p-4--xs,
[p-4*="xs"] {
  padding: var(--bricss-spacings-4, 16px);
}
.p-5--xs,
[p-5*="xs"] {
  padding: var(--bricss-spacings-5, 24px);
}
.p-6--xs,
[p-6*="xs"] {
  padding: var(--bricss-spacings-6, 32px);
}
.p-7--xs,
[p-7*="xs"] {
  padding: var(--bricss-spacings-7, 48px);
}
.p-8--xs,
[p-8*="xs"] {
  padding: var(--bricss-spacings-8, 64px);
}
.p-9--xs,
[p-9*="xs"] {
  padding: var(--bricss-spacings-9, 96px);
}
.pt-0--xs,
[pt-0*="xs"] {
  padding-top: 0px;
}
.pt-1--xs,
[pt-1*="xs"] {
  padding-top: var(--bricss-spacings-1, 4px);
}
.pt-2--xs,
[pt-2*="xs"] {
  padding-top: var(--bricss-spacings-2, 8px);
}
.pt-3--xs,
[pt-3*="xs"] {
  padding-top: var(--bricss-spacings-3, 12px);
}
.pt-4--xs,
[pt-4*="xs"] {
  padding-top: var(--bricss-spacings-4, 16px);
}
.pt-5--xs,
[pt-5*="xs"] {
  padding-top: var(--bricss-spacings-5, 24px);
}
.pt-6--xs,
[pt-6*="xs"] {
  padding-top: var(--bricss-spacings-6, 32px);
}
.pt-7--xs,
[pt-7*="xs"] {
  padding-top: var(--bricss-spacings-7, 48px);
}
.pt-8--xs,
[pt-8*="xs"] {
  padding-top: var(--bricss-spacings-8, 64px);
}
.pt-9--xs,
[pt-9*="xs"] {
  padding-top: var(--bricss-spacings-9, 96px);
}
.pr-0--xs,
[pr-0*="xs"] {
  padding-right: 0px;
}
.pr-1--xs,
[pr-1*="xs"] {
  padding-right: var(--bricss-spacings-1, 4px);
}
.pr-2--xs,
[pr-2*="xs"] {
  padding-right: var(--bricss-spacings-2, 8px);
}
.pr-3--xs,
[pr-3*="xs"] {
  padding-right: var(--bricss-spacings-3, 12px);
}
.pr-4--xs,
[pr-4*="xs"] {
  padding-right: var(--bricss-spacings-4, 16px);
}
.pr-5--xs,
[pr-5*="xs"] {
  padding-right: var(--bricss-spacings-5, 24px);
}
.pr-6--xs,
[pr-6*="xs"] {
  padding-right: var(--bricss-spacings-6, 32px);
}
.pr-7--xs,
[pr-7*="xs"] {
  padding-right: var(--bricss-spacings-7, 48px);
}
.pr-8--xs,
[pr-8*="xs"] {
  padding-right: var(--bricss-spacings-8, 64px);
}
.pr-9--xs,
[pr-9*="xs"] {
  padding-right: var(--bricss-spacings-9, 96px);
}
.pb-0--xs,
[pb-0*="xs"] {
  padding-bottom: 0px;
}
.pb-1--xs,
[pb-1*="xs"] {
  padding-bottom: var(--bricss-spacings-1, 4px);
}
.pb-2--xs,
[pb-2*="xs"] {
  padding-bottom: var(--bricss-spacings-2, 8px);
}
.pb-3--xs,
[pb-3*="xs"] {
  padding-bottom: var(--bricss-spacings-3, 12px);
}
.pb-4--xs,
[pb-4*="xs"] {
  padding-bottom: var(--bricss-spacings-4, 16px);
}
.pb-5--xs,
[pb-5*="xs"] {
  padding-bottom: var(--bricss-spacings-5, 24px);
}
.pb-6--xs,
[pb-6*="xs"] {
  padding-bottom: var(--bricss-spacings-6, 32px);
}
.pb-7--xs,
[pb-7*="xs"] {
  padding-bottom: var(--bricss-spacings-7, 48px);
}
.pb-8--xs,
[pb-8*="xs"] {
  padding-bottom: var(--bricss-spacings-8, 64px);
}
.pb-9--xs,
[pb-9*="xs"] {
  padding-bottom: var(--bricss-spacings-9, 96px);
}
.pl-0--xs,
[pl-0*="xs"] {
  padding-left: 0px;
}
.pl-1--xs,
[pl-1*="xs"] {
  padding-left: var(--bricss-spacings-1, 4px);
}
.pl-2--xs,
[pl-2*="xs"] {
  padding-left: var(--bricss-spacings-2, 8px);
}
.pl-3--xs,
[pl-3*="xs"] {
  padding-left: var(--bricss-spacings-3, 12px);
}
.pl-4--xs,
[pl-4*="xs"] {
  padding-left: var(--bricss-spacings-4, 16px);
}
.pl-5--xs,
[pl-5*="xs"] {
  padding-left: var(--bricss-spacings-5, 24px);
}
.pl-6--xs,
[pl-6*="xs"] {
  padding-left: var(--bricss-spacings-6, 32px);
}
.pl-7--xs,
[pl-7*="xs"] {
  padding-left: var(--bricss-spacings-7, 48px);
}
.pl-8--xs,
[pl-8*="xs"] {
  padding-left: var(--bricss-spacings-8, 64px);
}
.pl-9--xs,
[pl-9*="xs"] {
  padding-left: var(--bricss-spacings-9, 96px);
}
.m-0--xs,
[m-0*="xs"] {
  margin: 0px;
}
.m-auto--xs,
[m-auto*="xs"] {
  margin: auto;
}
.m-1--xs,
[m-1*="xs"] {
  margin: var(--bricss-spacings-1, 4px);
}
.m-2--xs,
[m-2*="xs"] {
  margin: var(--bricss-spacings-2, 8px);
}
.m-3--xs,
[m-3*="xs"] {
  margin: var(--bricss-spacings-3, 12px);
}
.m-4--xs,
[m-4*="xs"] {
  margin: var(--bricss-spacings-4, 16px);
}
.m-5--xs,
[m-5*="xs"] {
  margin: var(--bricss-spacings-5, 24px);
}
.m-6--xs,
[m-6*="xs"] {
  margin: var(--bricss-spacings-6, 32px);
}
.m-7--xs,
[m-7*="xs"] {
  margin: var(--bricss-spacings-7, 48px);
}
.m-8--xs,
[m-8*="xs"] {
  margin: var(--bricss-spacings-8, 64px);
}
.m-9--xs,
[m-9*="xs"] {
  margin: var(--bricss-spacings-9, 96px);
}
.mt-0--xs,
[mt-0*="xs"] {
  margin-top: 0px;
}
.mt-offset-1--xs,
[mt-offset-1*="xs"] {
  margin-top: -0.06em;
}
.mt-offset-2--xs,
[mt-offset-2*="xs"] {
  margin-top: 0.06em;
}
.mt-2px--xs,
[mt-2px*="xs"] {
  margin-top: 2px;
}
.mt-1--xs,
[mt-1*="xs"] {
  margin-top: var(--bricss-spacings-1, 4px);
}
.mt-2--xs,
[mt-2*="xs"] {
  margin-top: var(--bricss-spacings-2, 8px);
}
.mt-3--xs,
[mt-3*="xs"] {
  margin-top: var(--bricss-spacings-3, 12px);
}
.mt-4--xs,
[mt-4*="xs"] {
  margin-top: var(--bricss-spacings-4, 16px);
}
.mt-5--xs,
[mt-5*="xs"] {
  margin-top: var(--bricss-spacings-5, 24px);
}
.mt-6--xs,
[mt-6*="xs"] {
  margin-top: var(--bricss-spacings-6, 32px);
}
.mt-7--xs,
[mt-7*="xs"] {
  margin-top: var(--bricss-spacings-7, 48px);
}
.mt-8--xs,
[mt-8*="xs"] {
  margin-top: var(--bricss-spacings-8, 64px);
}
.mt-9--xs,
[mt-9*="xs"] {
  margin-top: var(--bricss-spacings-9, 96px);
}
.mr-0--xs,
[mr-0*="xs"] {
  margin-right: 0px;
}
.mr-auto--xs,
[mr-auto*="xs"] {
  margin-right: auto;
}
.mr-1--xs,
[mr-1*="xs"] {
  margin-right: var(--bricss-spacings-1, 4px);
}
.mr-2--xs,
[mr-2*="xs"] {
  margin-right: var(--bricss-spacings-2, 8px);
}
.mr-3--xs,
[mr-3*="xs"] {
  margin-right: var(--bricss-spacings-3, 12px);
}
.mr-4--xs,
[mr-4*="xs"] {
  margin-right: var(--bricss-spacings-4, 16px);
}
.mr-5--xs,
[mr-5*="xs"] {
  margin-right: var(--bricss-spacings-5, 24px);
}
.mr-6--xs,
[mr-6*="xs"] {
  margin-right: var(--bricss-spacings-6, 32px);
}
.mr-7--xs,
[mr-7*="xs"] {
  margin-right: var(--bricss-spacings-7, 48px);
}
.mr-8--xs,
[mr-8*="xs"] {
  margin-right: var(--bricss-spacings-8, 64px);
}
.mr-9--xs,
[mr-9*="xs"] {
  margin-right: var(--bricss-spacings-9, 96px);
}
.mb-0--xs,
[mb-0*="xs"] {
  margin-bottom: 0px;
}
.mb-1--xs,
[mb-1*="xs"] {
  margin-bottom: var(--bricss-spacings-1, 4px);
}
.mb-2--xs,
[mb-2*="xs"] {
  margin-bottom: var(--bricss-spacings-2, 8px);
}
.mb-3--xs,
[mb-3*="xs"] {
  margin-bottom: var(--bricss-spacings-3, 12px);
}
.mb-4--xs,
[mb-4*="xs"] {
  margin-bottom: var(--bricss-spacings-4, 16px);
}
.mb-5--xs,
[mb-5*="xs"] {
  margin-bottom: var(--bricss-spacings-5, 24px);
}
.mb-6--xs,
[mb-6*="xs"] {
  margin-bottom: var(--bricss-spacings-6, 32px);
}
.mb-7--xs,
[mb-7*="xs"] {
  margin-bottom: var(--bricss-spacings-7, 48px);
}
.mb-8--xs,
[mb-8*="xs"] {
  margin-bottom: var(--bricss-spacings-8, 64px);
}
.mb-9--xs,
[mb-9*="xs"] {
  margin-bottom: var(--bricss-spacings-9, 96px);
}
.ml-0--xs,
[ml-0*="xs"] {
  margin-left: 0px;
}
.ml-auto--xs,
[ml-auto*="xs"] {
  margin-left: auto;
}
.ml-special-1--xs,
[ml-special-1*="xs"] {
  margin-left: calc(2 * var(--bricss-spacings-8) + 2px);
}
.ml-special-2--xs,
[ml-special-2*="xs"] {
  margin-left: calc(2 * var(--bricss-spacings-7) + 2px);
}
.ml-1--xs,
[ml-1*="xs"] {
  margin-left: var(--bricss-spacings-1, 4px);
}
.ml-2--xs,
[ml-2*="xs"] {
  margin-left: var(--bricss-spacings-2, 8px);
}
.ml-3--xs,
[ml-3*="xs"] {
  margin-left: var(--bricss-spacings-3, 12px);
}
.ml-4--xs,
[ml-4*="xs"] {
  margin-left: var(--bricss-spacings-4, 16px);
}
.ml-5--xs,
[ml-5*="xs"] {
  margin-left: var(--bricss-spacings-5, 24px);
}
.ml-6--xs,
[ml-6*="xs"] {
  margin-left: var(--bricss-spacings-6, 32px);
}
.ml-7--xs,
[ml-7*="xs"] {
  margin-left: var(--bricss-spacings-7, 48px);
}
.ml-8--xs,
[ml-8*="xs"] {
  margin-left: var(--bricss-spacings-8, 64px);
}
.ml-9--xs,
[ml-9*="xs"] {
  margin-left: var(--bricss-spacings-9, 96px);
}
.fs-1--xs,
[fs-1*="xs"] {
  font-size: var(--bricss-fontSizes-1, 10px);
}
.fs-2--xs,
[fs-2*="xs"] {
  font-size: var(--bricss-fontSizes-2, 12px);
}
.fs-3--xs,
[fs-3*="xs"] {
  font-size: var(--bricss-fontSizes-3, 14px);
}
.fs-4--xs,
[fs-4*="xs"] {
  font-size: var(--bricss-fontSizes-4, 16px);
}
.fs-5--xs,
[fs-5*="xs"] {
  font-size: var(--bricss-fontSizes-5, 24px);
}
.fs-6--xs,
[fs-6*="xs"] {
  font-size: var(--bricss-fontSizes-6, 36px);
}
.fs-7--xs,
[fs-7*="xs"] {
  font-size: var(--bricss-fontSizes-7, 58px);
}
.fs-8--xs,
[fs-8*="xs"] {
  font-size: var(--bricss-fontSizes-8, 84px);
}
.fs-9--xs,
[fs-9*="xs"] {
  font-size: var(--bricss-fontSizes-9, 98px);
}
.fs-10--xs,
[fs-10*="xs"] {
  font-size: var(--bricss-fontSizes-10, 130px);
}
.ta-left--xs,
[ta-left*="xs"] {
  text-align: left;
}
.ta-center--xs,
[ta-center*="xs"] {
  text-align: center;
}
.ta-right--xs,
[ta-right*="xs"] {
  text-align: right;
}
.td-none--xs,
[td-none*="xs"] {
  text-decoration: none;
}
.td-underline--xs,
[td-underline*="xs"] {
  text-decoration: underline;
}
.td-line-through--xs,
[td-line-through*="xs"] {
  text-decoration: line-through;
}
.ws-nowrap--xs,
[ws-nowrap*="xs"] {
  white-space: nowrap;
}
}
/*END @media xs*/

/*START @media lg*/
@media (min-width: 600px) {

.d-flex--lg,
[d-flex*="lg"] {
  display: flex;
}
.u-d-flex--lg,
[u-d-flex*="lg"] {
  display: flex !important;
}
.d-inline-flex--lg,
[d-inline-flex*="lg"] {
  display: inline-flex;
}
.u-d-inline-flex--lg,
[u-d-inline-flex*="lg"] {
  display: inline-flex !important;
}
.d-none--lg,
[d-none*="lg"] {
  display: none;
}
.u-d-none--lg,
[u-d-none*="lg"] {
  display: none !important;
}
.ai-baseline--lg,
[ai-baseline*="lg"] {
  align-items: baseline;
}
.ai-center--lg,
[ai-center*="lg"] {
  align-items: center;
}
.ai-start--lg,
[ai-start*="lg"] {
  align-items: flex-start;
}
.ai-end--lg,
[ai-end*="lg"] {
  align-items: flex-end;
}
.jc-center--lg,
[jc-center*="lg"] {
  justify-content: center;
}
.jc-space-between--lg,
[jc-space-between*="lg"] {
  justify-content: space-between;
}
.jc-space-around--lg,
[jc-space-around*="lg"] {
  justify-content: space-around;
}
.jc-start--lg,
[jc-start*="lg"] {
  justify-content: flex-start;
}
.jc-end--lg,
[jc-end*="lg"] {
  justify-content: flex-end;
}
.fd-column--lg,
[fd-column*="lg"] {
  flex-direction: column;
}
.fw-wrap--lg,
[fw-wrap*="lg"] {
  flex-wrap: wrap;
}
.order--1--lg,
[order--1*="lg"] {
  order: -1;
}
.pos-relative--lg,
[pos-relative*="lg"] {
  position: relative;
}
.pos-absolute--lg,
[pos-absolute*="lg"] {
  position: absolute;
}
.pos-fixed--lg,
[pos-fixed*="lg"] {
  position: fixed;
}
.pos-sticky--lg,
[pos-sticky*="lg"] {
  position: sticky;
}
.top-0--lg,
[top-0*="lg"] {
  top: 0%;
}
.top-50--lg,
[top-50*="lg"] {
  top: 50%;
}
.top-100--lg,
[top-100*="lg"] {
  top: 100%;
}
.top-42px--lg,
[top-42px*="lg"] {
  top: 42px;
}
.right-0--lg,
[right-0*="lg"] {
  right: 0%;
}
.right-50--lg,
[right-50*="lg"] {
  right: 50%;
}
.right-100--lg,
[right-100*="lg"] {
  right: 100%;
}
.bottom-0--lg,
[bottom-0*="lg"] {
  bottom: 0%;
}
.bottom-50--lg,
[bottom-50*="lg"] {
  bottom: 50%;
}
.bottom-100--lg,
[bottom-100*="lg"] {
  bottom: 100%;
}
.left-0--lg,
[left-0*="lg"] {
  left: 0%;
}
.left-50--lg,
[left-50*="lg"] {
  left: 50%;
}
.left-100--lg,
[left-100*="lg"] {
  left: 100%;
}
.z-1--lg,
[z-1*="lg"] {
  z-index: 1;
}
.z-2--lg,
[z-2*="lg"] {
  z-index: 2;
}
.z-3--lg,
[z-3*="lg"] {
  z-index: 3;
}
.z-4--lg,
[z-4*="lg"] {
  z-index: 4;
}
.z-5--lg,
[z-5*="lg"] {
  z-index: 5;
}
.z-6--lg,
[z-6*="lg"] {
  z-index: 6;
}
.z-7--lg,
[z-7*="lg"] {
  z-index: 7;
}
.z-8--lg,
[z-8*="lg"] {
  z-index: 8;
}
.z-9--lg,
[z-9*="lg"] {
  z-index: 9;
}
.t-tX-50--lg,
[t-tX-50*="lg"] {
  --dsg-tX: -50%;
}
.t-tX50--lg,
[t-tX50*="lg"] {
  --dsg-tX: 50%;
}
.t-tX-100--lg,
[t-tX-100*="lg"] {
  --dsg-tX: -100%;
}
.t-tX100--lg,
[t-tX100*="lg"] {
  --dsg-tX: 100%;
}
.t-tY-50--lg,
[t-tY-50*="lg"] {
  --dsg-tY: -50%;
}
.t-tY50--lg,
[t-tY50*="lg"] {
  --dsg-tY: 50%;
}
.t-tY-100--lg,
[t-tY-100*="lg"] {
  --dsg-tY: -100%;
}
.t-tY100--lg,
[t-tY100*="lg"] {
  --dsg-tY: 100%;
}
.t-tX-50--lg,
[t-tX-50*="lg"] {
  transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0));
}
.t-tX50--lg,
[t-tX50*="lg"] {
  transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0));
}
.t-tX-100--lg,
[t-tX-100*="lg"] {
  transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0));
}
.t-tX100--lg,
[t-tX100*="lg"] {
  transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0));
}
.t-tY-50--lg,
[t-tY-50*="lg"] {
  transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0));
}
.t-tY50--lg,
[t-tY50*="lg"] {
  transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0));
}
.t-tY-100--lg,
[t-tY-100*="lg"] {
  transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0));
}
.t-tY100--lg,
[t-tY100*="lg"] {
  transform: translateX(var(--dsg-tX, 0)) translateY(var(--dsg-tY, 0));
}
.gap-1--lg,
[gap-1*="lg"] {
  gap: var(--bricss-spacings-1, 4px);
}
.gap-2--lg,
[gap-2*="lg"] {
  gap: var(--bricss-spacings-2, 8px);
}
.gap-3--lg,
[gap-3*="lg"] {
  gap: var(--bricss-spacings-3, 12px);
}
.gap-4--lg,
[gap-4*="lg"] {
  gap: var(--bricss-spacings-4, 16px);
}
.gap-5--lg,
[gap-5*="lg"] {
  gap: var(--bricss-spacings-5, 24px);
}
.gap-6--lg,
[gap-6*="lg"] {
  gap: var(--bricss-spacings-6, 32px);
}
.gap-7--lg,
[gap-7*="lg"] {
  gap: var(--bricss-spacings-7, 48px);
}
.gap-8--lg,
[gap-8*="lg"] {
  gap: var(--bricss-spacings-8, 64px);
}
.gap-9--lg,
[gap-9*="lg"] {
  gap: var(--bricss-spacings-9, 96px);
}
.gap-1--lg,
[gap-1*="lg"] {
  --dsg-gap: var(--bricss-spacings-1, 4px);
}
.gap-2--lg,
[gap-2*="lg"] {
  --dsg-gap: var(--bricss-spacings-2, 8px);
}
.gap-3--lg,
[gap-3*="lg"] {
  --dsg-gap: var(--bricss-spacings-3, 12px);
}
.gap-4--lg,
[gap-4*="lg"] {
  --dsg-gap: var(--bricss-spacings-4, 16px);
}
.gap-5--lg,
[gap-5*="lg"] {
  --dsg-gap: var(--bricss-spacings-5, 24px);
}
.gap-6--lg,
[gap-6*="lg"] {
  --dsg-gap: var(--bricss-spacings-6, 32px);
}
.gap-7--lg,
[gap-7*="lg"] {
  --dsg-gap: var(--bricss-spacings-7, 48px);
}
.gap-8--lg,
[gap-8*="lg"] {
  --dsg-gap: var(--bricss-spacings-8, 64px);
}
.gap-9--lg,
[gap-9*="lg"] {
  --dsg-gap: var(--bricss-spacings-9, 96px);
}
.fg-1--lg,
[fg-1*="lg"] {
  flex-grow: 1;
}
.w-100--lg,
[w-100*="lg"] {
  width: 100%;
}
.w-auto--lg,
[w-auto*="lg"] {
  width: auto;
}
.h-100--lg,
[h-100*="lg"] {
  height: 100%;
}
.h-auto--lg,
[h-auto*="lg"] {
  height: auto;
}
.h-100vh--lg,
[h-100vh*="lg"] {
  height: 100vh;
}
.maxw-2ch--lg,
[maxw-2ch*="lg"] {
  max-width: 2ch;
}
.maxh-100--lg,
[maxh-100*="lg"] {
  max-height: 100%;
}
.maxh-100vh--lg,
[maxh-100vh*="lg"] {
  max-height: 100vh;
}
.maxh-80vh--lg,
[maxh-80vh*="lg"] {
  max-height: 80vh;
}
.maxh-50vh--lg,
[maxh-50vh*="lg"] {
  max-height: 50vh;
}
.minh-100vh--lg,
[minh-100vh*="lg"] {
  min-height: 100vh;
}
.ar-1--lg,
[ar-1*="lg"] {
  aspect-ratio: 1;
}
.o-auto--lg,
[o-auto*="lg"] {
  overflow: auto;
}
.o-hidden--lg,
[o-hidden*="lg"] {
  overflow: hidden;
}
.p-0--lg,
[p-0*="lg"] {
  padding: 0px;
}
.p-1--lg,
[p-1*="lg"] {
  padding: var(--bricss-spacings-1, 4px);
}
.p-2--lg,
[p-2*="lg"] {
  padding: var(--bricss-spacings-2, 8px);
}
.p-3--lg,
[p-3*="lg"] {
  padding: var(--bricss-spacings-3, 12px);
}
.p-4--lg,
[p-4*="lg"] {
  padding: var(--bricss-spacings-4, 16px);
}
.p-5--lg,
[p-5*="lg"] {
  padding: var(--bricss-spacings-5, 24px);
}
.p-6--lg,
[p-6*="lg"] {
  padding: var(--bricss-spacings-6, 32px);
}
.p-7--lg,
[p-7*="lg"] {
  padding: var(--bricss-spacings-7, 48px);
}
.p-8--lg,
[p-8*="lg"] {
  padding: var(--bricss-spacings-8, 64px);
}
.p-9--lg,
[p-9*="lg"] {
  padding: var(--bricss-spacings-9, 96px);
}
.pt-0--lg,
[pt-0*="lg"] {
  padding-top: 0px;
}
.pt-1--lg,
[pt-1*="lg"] {
  padding-top: var(--bricss-spacings-1, 4px);
}
.pt-2--lg,
[pt-2*="lg"] {
  padding-top: var(--bricss-spacings-2, 8px);
}
.pt-3--lg,
[pt-3*="lg"] {
  padding-top: var(--bricss-spacings-3, 12px);
}
.pt-4--lg,
[pt-4*="lg"] {
  padding-top: var(--bricss-spacings-4, 16px);
}
.pt-5--lg,
[pt-5*="lg"] {
  padding-top: var(--bricss-spacings-5, 24px);
}
.pt-6--lg,
[pt-6*="lg"] {
  padding-top: var(--bricss-spacings-6, 32px);
}
.pt-7--lg,
[pt-7*="lg"] {
  padding-top: var(--bricss-spacings-7, 48px);
}
.pt-8--lg,
[pt-8*="lg"] {
  padding-top: var(--bricss-spacings-8, 64px);
}
.pt-9--lg,
[pt-9*="lg"] {
  padding-top: var(--bricss-spacings-9, 96px);
}
.pr-0--lg,
[pr-0*="lg"] {
  padding-right: 0px;
}
.pr-1--lg,
[pr-1*="lg"] {
  padding-right: var(--bricss-spacings-1, 4px);
}
.pr-2--lg,
[pr-2*="lg"] {
  padding-right: var(--bricss-spacings-2, 8px);
}
.pr-3--lg,
[pr-3*="lg"] {
  padding-right: var(--bricss-spacings-3, 12px);
}
.pr-4--lg,
[pr-4*="lg"] {
  padding-right: var(--bricss-spacings-4, 16px);
}
.pr-5--lg,
[pr-5*="lg"] {
  padding-right: var(--bricss-spacings-5, 24px);
}
.pr-6--lg,
[pr-6*="lg"] {
  padding-right: var(--bricss-spacings-6, 32px);
}
.pr-7--lg,
[pr-7*="lg"] {
  padding-right: var(--bricss-spacings-7, 48px);
}
.pr-8--lg,
[pr-8*="lg"] {
  padding-right: var(--bricss-spacings-8, 64px);
}
.pr-9--lg,
[pr-9*="lg"] {
  padding-right: var(--bricss-spacings-9, 96px);
}
.pb-0--lg,
[pb-0*="lg"] {
  padding-bottom: 0px;
}
.pb-1--lg,
[pb-1*="lg"] {
  padding-bottom: var(--bricss-spacings-1, 4px);
}
.pb-2--lg,
[pb-2*="lg"] {
  padding-bottom: var(--bricss-spacings-2, 8px);
}
.pb-3--lg,
[pb-3*="lg"] {
  padding-bottom: var(--bricss-spacings-3, 12px);
}
.pb-4--lg,
[pb-4*="lg"] {
  padding-bottom: var(--bricss-spacings-4, 16px);
}
.pb-5--lg,
[pb-5*="lg"] {
  padding-bottom: var(--bricss-spacings-5, 24px);
}
.pb-6--lg,
[pb-6*="lg"] {
  padding-bottom: var(--bricss-spacings-6, 32px);
}
.pb-7--lg,
[pb-7*="lg"] {
  padding-bottom: var(--bricss-spacings-7, 48px);
}
.pb-8--lg,
[pb-8*="lg"] {
  padding-bottom: var(--bricss-spacings-8, 64px);
}
.pb-9--lg,
[pb-9*="lg"] {
  padding-bottom: var(--bricss-spacings-9, 96px);
}
.pl-0--lg,
[pl-0*="lg"] {
  padding-left: 0px;
}
.pl-1--lg,
[pl-1*="lg"] {
  padding-left: var(--bricss-spacings-1, 4px);
}
.pl-2--lg,
[pl-2*="lg"] {
  padding-left: var(--bricss-spacings-2, 8px);
}
.pl-3--lg,
[pl-3*="lg"] {
  padding-left: var(--bricss-spacings-3, 12px);
}
.pl-4--lg,
[pl-4*="lg"] {
  padding-left: var(--bricss-spacings-4, 16px);
}
.pl-5--lg,
[pl-5*="lg"] {
  padding-left: var(--bricss-spacings-5, 24px);
}
.pl-6--lg,
[pl-6*="lg"] {
  padding-left: var(--bricss-spacings-6, 32px);
}
.pl-7--lg,
[pl-7*="lg"] {
  padding-left: var(--bricss-spacings-7, 48px);
}
.pl-8--lg,
[pl-8*="lg"] {
  padding-left: var(--bricss-spacings-8, 64px);
}
.pl-9--lg,
[pl-9*="lg"] {
  padding-left: var(--bricss-spacings-9, 96px);
}
.m-0--lg,
[m-0*="lg"] {
  margin: 0px;
}
.m-auto--lg,
[m-auto*="lg"] {
  margin: auto;
}
.m-1--lg,
[m-1*="lg"] {
  margin: var(--bricss-spacings-1, 4px);
}
.m-2--lg,
[m-2*="lg"] {
  margin: var(--bricss-spacings-2, 8px);
}
.m-3--lg,
[m-3*="lg"] {
  margin: var(--bricss-spacings-3, 12px);
}
.m-4--lg,
[m-4*="lg"] {
  margin: var(--bricss-spacings-4, 16px);
}
.m-5--lg,
[m-5*="lg"] {
  margin: var(--bricss-spacings-5, 24px);
}
.m-6--lg,
[m-6*="lg"] {
  margin: var(--bricss-spacings-6, 32px);
}
.m-7--lg,
[m-7*="lg"] {
  margin: var(--bricss-spacings-7, 48px);
}
.m-8--lg,
[m-8*="lg"] {
  margin: var(--bricss-spacings-8, 64px);
}
.m-9--lg,
[m-9*="lg"] {
  margin: var(--bricss-spacings-9, 96px);
}
.mt-0--lg,
[mt-0*="lg"] {
  margin-top: 0px;
}
.mt-offset-1--lg,
[mt-offset-1*="lg"] {
  margin-top: -0.06em;
}
.mt-offset-2--lg,
[mt-offset-2*="lg"] {
  margin-top: 0.06em;
}
.mt-2px--lg,
[mt-2px*="lg"] {
  margin-top: 2px;
}
.mt-1--lg,
[mt-1*="lg"] {
  margin-top: var(--bricss-spacings-1, 4px);
}
.mt-2--lg,
[mt-2*="lg"] {
  margin-top: var(--bricss-spacings-2, 8px);
}
.mt-3--lg,
[mt-3*="lg"] {
  margin-top: var(--bricss-spacings-3, 12px);
}
.mt-4--lg,
[mt-4*="lg"] {
  margin-top: var(--bricss-spacings-4, 16px);
}
.mt-5--lg,
[mt-5*="lg"] {
  margin-top: var(--bricss-spacings-5, 24px);
}
.mt-6--lg,
[mt-6*="lg"] {
  margin-top: var(--bricss-spacings-6, 32px);
}
.mt-7--lg,
[mt-7*="lg"] {
  margin-top: var(--bricss-spacings-7, 48px);
}
.mt-8--lg,
[mt-8*="lg"] {
  margin-top: var(--bricss-spacings-8, 64px);
}
.mt-9--lg,
[mt-9*="lg"] {
  margin-top: var(--bricss-spacings-9, 96px);
}
.mr-0--lg,
[mr-0*="lg"] {
  margin-right: 0px;
}
.mr-auto--lg,
[mr-auto*="lg"] {
  margin-right: auto;
}
.mr-1--lg,
[mr-1*="lg"] {
  margin-right: var(--bricss-spacings-1, 4px);
}
.mr-2--lg,
[mr-2*="lg"] {
  margin-right: var(--bricss-spacings-2, 8px);
}
.mr-3--lg,
[mr-3*="lg"] {
  margin-right: var(--bricss-spacings-3, 12px);
}
.mr-4--lg,
[mr-4*="lg"] {
  margin-right: var(--bricss-spacings-4, 16px);
}
.mr-5--lg,
[mr-5*="lg"] {
  margin-right: var(--bricss-spacings-5, 24px);
}
.mr-6--lg,
[mr-6*="lg"] {
  margin-right: var(--bricss-spacings-6, 32px);
}
.mr-7--lg,
[mr-7*="lg"] {
  margin-right: var(--bricss-spacings-7, 48px);
}
.mr-8--lg,
[mr-8*="lg"] {
  margin-right: var(--bricss-spacings-8, 64px);
}
.mr-9--lg,
[mr-9*="lg"] {
  margin-right: var(--bricss-spacings-9, 96px);
}
.mb-0--lg,
[mb-0*="lg"] {
  margin-bottom: 0px;
}
.mb-1--lg,
[mb-1*="lg"] {
  margin-bottom: var(--bricss-spacings-1, 4px);
}
.mb-2--lg,
[mb-2*="lg"] {
  margin-bottom: var(--bricss-spacings-2, 8px);
}
.mb-3--lg,
[mb-3*="lg"] {
  margin-bottom: var(--bricss-spacings-3, 12px);
}
.mb-4--lg,
[mb-4*="lg"] {
  margin-bottom: var(--bricss-spacings-4, 16px);
}
.mb-5--lg,
[mb-5*="lg"] {
  margin-bottom: var(--bricss-spacings-5, 24px);
}
.mb-6--lg,
[mb-6*="lg"] {
  margin-bottom: var(--bricss-spacings-6, 32px);
}
.mb-7--lg,
[mb-7*="lg"] {
  margin-bottom: var(--bricss-spacings-7, 48px);
}
.mb-8--lg,
[mb-8*="lg"] {
  margin-bottom: var(--bricss-spacings-8, 64px);
}
.mb-9--lg,
[mb-9*="lg"] {
  margin-bottom: var(--bricss-spacings-9, 96px);
}
.ml-0--lg,
[ml-0*="lg"] {
  margin-left: 0px;
}
.ml-auto--lg,
[ml-auto*="lg"] {
  margin-left: auto;
}
.ml-special-1--lg,
[ml-special-1*="lg"] {
  margin-left: calc(2 * var(--bricss-spacings-8) + 2px);
}
.ml-special-2--lg,
[ml-special-2*="lg"] {
  margin-left: calc(2 * var(--bricss-spacings-7) + 2px);
}
.ml-1--lg,
[ml-1*="lg"] {
  margin-left: var(--bricss-spacings-1, 4px);
}
.ml-2--lg,
[ml-2*="lg"] {
  margin-left: var(--bricss-spacings-2, 8px);
}
.ml-3--lg,
[ml-3*="lg"] {
  margin-left: var(--bricss-spacings-3, 12px);
}
.ml-4--lg,
[ml-4*="lg"] {
  margin-left: var(--bricss-spacings-4, 16px);
}
.ml-5--lg,
[ml-5*="lg"] {
  margin-left: var(--bricss-spacings-5, 24px);
}
.ml-6--lg,
[ml-6*="lg"] {
  margin-left: var(--bricss-spacings-6, 32px);
}
.ml-7--lg,
[ml-7*="lg"] {
  margin-left: var(--bricss-spacings-7, 48px);
}
.ml-8--lg,
[ml-8*="lg"] {
  margin-left: var(--bricss-spacings-8, 64px);
}
.ml-9--lg,
[ml-9*="lg"] {
  margin-left: var(--bricss-spacings-9, 96px);
}
.fs-1--lg,
[fs-1*="lg"] {
  font-size: var(--bricss-fontSizes-1, 10px);
}
.fs-2--lg,
[fs-2*="lg"] {
  font-size: var(--bricss-fontSizes-2, 12px);
}
.fs-3--lg,
[fs-3*="lg"] {
  font-size: var(--bricss-fontSizes-3, 14px);
}
.fs-4--lg,
[fs-4*="lg"] {
  font-size: var(--bricss-fontSizes-4, 16px);
}
.fs-5--lg,
[fs-5*="lg"] {
  font-size: var(--bricss-fontSizes-5, 24px);
}
.fs-6--lg,
[fs-6*="lg"] {
  font-size: var(--bricss-fontSizes-6, 36px);
}
.fs-7--lg,
[fs-7*="lg"] {
  font-size: var(--bricss-fontSizes-7, 58px);
}
.fs-8--lg,
[fs-8*="lg"] {
  font-size: var(--bricss-fontSizes-8, 84px);
}
.fs-9--lg,
[fs-9*="lg"] {
  font-size: var(--bricss-fontSizes-9, 98px);
}
.fs-10--lg,
[fs-10*="lg"] {
  font-size: var(--bricss-fontSizes-10, 130px);
}
.ta-left--lg,
[ta-left*="lg"] {
  text-align: left;
}
.ta-center--lg,
[ta-center*="lg"] {
  text-align: center;
}
.ta-right--lg,
[ta-right*="lg"] {
  text-align: right;
}
.td-none--lg,
[td-none*="lg"] {
  text-decoration: none;
}
.td-underline--lg,
[td-underline*="lg"] {
  text-decoration: underline;
}
.td-line-through--lg,
[td-line-through*="lg"] {
  text-decoration: line-through;
}
.ws-nowrap--lg,
[ws-nowrap*="lg"] {
  white-space: nowrap;
}
}
/*END @media lg*/

/* HTML5 */
* {
    box-sizing: border-box;
}
html, body {
    overscroll-behavior: none;
}
body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--bricss-colors-primary-300);
    color: var(--bricss-colors-neutral-100);
    font-family: var(--bricss-fontFamilies-400);
}
button:disabled {
    opacity: 0.3;
    pointer-events: none;
}
a {
    color: var(--bricss-colors-secondary-100);
    text-decoration-thickness: 2px;
    transition: color 300ms;
    &:hover {
        color: var(--bricss-colors-neutral-100);
    }
}
@keyframes formulae1 {
    0% { transform: translateX(-50%) translateY(-50%) translateZ(800px); opacity: 0.6; }
    100% { transform: translateX(-50%) translateY(-50%) translateZ(-800px); opacity: 0; }
}
@keyframes formulae2 {
    0% { transform: translateX(-50%) translateY(-50%) translateZ(800px); opacity: 0.4; }
    100% { transform: translateX(-50%) translateY(-50%) translateZ(-800px); opacity: 0; }
}
@keyframes smoke {
    0% { transform: perspective(800px) translateZ(0px); opacity: 0; }
    50% { transform: perspective(800px) translateZ(400px); opacity: 1; }
    100% { transform: perspective(800px) translateZ(800px); opacity: 0; }
}
.__stop_animations > * {
    animation-play-state: paused !important;
}
.__rust {
    -webkit-background-clip: text;
    background-image: url('https://cdn.jsdelivr.net/gh/olivier3lanc/cinematics-resources/breaking_bad_intro/rust.webp');
}

console.log("Event Fired")
// Scroll Btween
// ScrollBtween uses scroll position of document - or any DOM element - to tween CSS values on any DOM element. 
// https://github.com/olivier3lanc/Scroll-Btween
const scrollBtween = {
    defaults: {
        // frameDurationinMs: 20, // Integer - Duration in ms between to animation states
        tweenerIntervalinMs: 300, // Integer - Smoothness of the change. Available only if Ola tweener is enabled, duration between to tweens
        enabled: true // boolean - Enable or disable
    },
    // Ola instance
    tween: {},
    tweenIndex: {},
    // Intersection
    // @el - object - The DOM object to detect
    // Returns float
    // value < 0 means the element is not visible yet
    // value between 0 and 1 means the element is currently visible into the viewport
    // 0 means the element starts into the vie wport
    // 1 means the element has just finished to run through the viewport
    // value > 1 means the element has past the viewport is not visible anymore
    getIntersection: function(el) {
        let response = -1;
        if (typeof el == 'object') {
            const detector_id = el.dataset.detector;
            if (detector_id !== undefined) {
                const el_detector = document.getElementById(detector_id);
                if (el_detector !== null) {
                    el = el_detector;
                }
            }
            if (typeof el.getBoundingClientRect == 'function') {
                const box = el.getBoundingClientRect();
                const el_offset_top = box.top + window.pageYOffset - document.documentElement.clientTop;
                const el_height = el.clientHeight;
                const window_scroll_top = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
                const window_height = window.document.documentElement.clientHeight;
                response = (window_scroll_top + window_height - el_offset_top) / (window_height + el_height);
            }
        }
        return response;
    },
    // Set up the animations
    update: function() {
        // Scan for animations
        let elems_anims = document.querySelectorAll('[scroll-btween]');
        if (elems_anims !== null) {
            
            let ola_object = {};
            elems_anims.forEach(function(anim) {
                const anim_id = anim.getAttribute('scroll-btween');
                // Start populating custom index to quickly retrieve useful data on scroll binding function
                scrollBtween['tweenIndex'][anim_id] = [];
                Object.keys(anim.dataset).forEach(function(property, forEachIndex) {
                    const sourceExpression = anim.dataset[property].split('|');
                    let finalExpression = [];
                    let index = 0;
                    if (forEachIndex === 0) {
                        scrollBtween.tweenIndex[anim_id] = { transfer: {}, properties: []};
                    }
                    sourceExpression.forEach(function(partial) {
                        const fromToArray = partial.split(' to ');
                        if (fromToArray.length > 1) {
                            const fromValue = parseFloat(fromToArray[0]);
                            const toValue = parseFloat(fromToArray[1]);
                            const tween_id = anim_id + '_' + property + '_' + index.toString();

if (typeof Ola == 'function') {
                                ola_object[tween_id] = fromValue;
                            }

finalExpression.push(tween_id);
                            // Build the transfer function
                            scrollBtween.tweenIndex[anim_id]['transfer'][tween_id] = function(scroll_line) {
                                let response = 0
                                if (typeof scroll_line == 'number') {
                                    // Limits between 0 and 1
                                    if (scroll_line > 1) {
                                        scroll_line = 1;
                                    }
                                    if (scroll_line < 0) {
                                        scroll_line = 0;
                                    }
                                    // Keypoints case
                                    if (partial.indexOf(':') > 0) {
                                        // 0:0 to 70:0 to 100:150
                                        // console.log(anim_id);
                                        let xa = 0;
                                        let ya = fromValue;
                                        let xb = 1;
                                        let yb = 1;
                                        fromToArray.forEach(function(keypoint, keyPointIndex) {
                                            // If not last
                                            if (keyPointIndex < fromToArray.length - 1) {
                                                const positionCurrent = parseFloat(keypoint.split(':')[0]) / 100;
                                                const positionNext = parseFloat(fromToArray[keyPointIndex + 1].split(':')[0]) / 100;
                                                
                                                if (scroll_line >= positionCurrent && scroll_line <= positionNext) {
                                                    // console.log(positionCurrent, scroll_line, positionNext);
                                                    xa = positionCurrent;
                                                    ya = parseFloat(keypoint.split(':')[1]);
                                                    xb = positionNext;
                                                    yb = parseFloat(fromToArray[keyPointIndex + 1].split(':')[1]);
                                                }
                                            }
                                        });
                                        const coef = (yb - ya) / (xb - xa);
                                        const y0 = yb - coef * xb;
                                        response = coef * scroll_line + y0;
                                        // console.log(anim_id, response);
                                        // console.log('scroll_line:'+scroll_line, 'yb:'+yb, 'ya:'+ya, 'xb:'+xb, 'xa:'+xa, 'response:'+response);
                                    }
                                    // Basic fromValue/toValue case
                                    else {
                                        response = (toValue - fromValue) * scroll_line + fromValue;
                                    }
                                }
                                return response;
                            }

index++;
                        }
                        else {
                            finalExpression.push(partial);
                        }
                    });
                    scrollBtween.tweenIndex[anim_id]['properties'].push({
                        property: property,
                        expression: finalExpression
                    });
                });
            });
            // Include important style
            document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', '<style>[scroll-btween] { transition: none !important; }</style>');
            // Init Ola tweener
            if (typeof Ola == 'function') {
                scrollBtween['tween'] = Ola(ola_object);
            }
            // Init window scroll listener only if tweener is enabled
            if (typeof Ola == 'function') {
                window.addEventListener('scroll', scrollBtween.updateTweenerValues, {passive: true});
                window.addEventListener('load', scrollBtween.updateTweenerValues);
            }
            requestAnimationFrame(scrollBtween.apply);
            // Old method
            // scrollBtween.interval = setInterval(scrollBtween.frame, scrollBtween.defaults.frameDurationinMs);
        }
    },
    // Update tweener values witht new values from scroll bindr nodes
    // @delay - int - optional - Duration in ms to tween
    updateTweenerValues: function(delay = scrollBtween.defaults.tweenerIntervalinMs) {
        if (typeof Ola == 'function') {
            for (const anim_id in scrollBtween.tweenIndex) {
                if (Object.hasOwnProperty.call(scrollBtween.tweenIndex, anim_id)) {
                    const node = document.querySelector('[scroll-btween="'+anim_id+'"]');
                    if (node !== null) {
                        // Get scroll line
                        const scroll_line = scrollBtween.getIntersection(node);
                        // Get the target value to reach
                        let ola_update_set = {};
                        for (const tween_id in scrollBtween['tweenIndex'][anim_id]['transfer']) {
                            if (Object.hasOwnProperty.call(scrollBtween['tweenIndex'][anim_id]['transfer'], tween_id)) {
                                ola_update_set[tween_id] = scrollBtween['tweenIndex'][anim_id]['transfer'][tween_id](scroll_line);
                            }
                        }
                        scrollBtween.tween.set(ola_update_set, delay);
                    }
                }
            }
        }
    },
    // Work to to on each animation interval
    apply: function() {
        for (const anim_id in scrollBtween.tweenIndex) {
            if (Object.hasOwnProperty.call(scrollBtween.tweenIndex, anim_id)) {
                const node = document.querySelector('[scroll-btween="'+anim_id+'"]');
                if (node !== null) {
                    let scroll_line = 0;
                    if (typeof Ola == 'undefined') {
                        scroll_line = scrollBtween.getIntersection(node);
                    }
                    if (typeof scrollBtween['tweenIndex'][anim_id]['properties'] == 'object') {
                        scrollBtween['tweenIndex'][anim_id]['properties'].forEach(function(data) {
                            let completeTweenedValueToApply = '';
                            data.expression.forEach(function(partialValue) {
                                if (typeof scrollBtween['tweenIndex'][anim_id]['transfer'][partialValue] == 'function') {
                                    if (typeof Ola == 'function') {
                                        completeTweenedValueToApply += scrollBtween.tween[partialValue].toString();
                                    } else {
                                        completeTweenedValueToApply += scrollBtween['tweenIndex'][anim_id]['transfer'][partialValue](scroll_line).toString();
                                    }
                                } else {
                                    completeTweenedValueToApply += partialValue;
                                }
                            });
                            // Apply the final style on the specifed node
                            node.style[data.property] = completeTweenedValueToApply;
                        });
                    }
                }
            }
        }
        if (scrollBtween.defaults.enabled) {
            requestAnimationFrame(scrollBtween.apply);
        }
    },
    // Method to apply on each animatiton interval
    frame: function() {
        if (scrollBtween.defaults.enabled) {
            scrollBtween.apply();
        }
    },
    // Start / Resume animation interval
    start: function() {
        scrollBtween.defaults.enabled = true;
        requestAnimationFrame(scrollBtween.apply);
    },
    // Stop / Pause animation interval
    stop: function() {
        scrollBtween.defaults.enabled = false;
    }
}
scrollBtween.update();

// Audio
const loops = {
    sources: {},
    buffers: {},
    contexts: {},
    gains: {},
    stereoPanners: {},

createAudio: function(url, name) {
        loops.contexts[name] = new AudioContext();
        fetch(url)
            .then(response => response.arrayBuffer())
            .then(arrayBuffer => loops.contexts[name].decodeAudioData(arrayBuffer))
            .then(audioBuffer => {
                loops.buffers[name] = audioBuffer;
                loops.story._filesById[name].isLoaded = true;
                let count = 0;
                Object.keys(loops.story._filesById).forEach(function(name) {
                    if (loops.story._filesById[name].isLoaded) count++;
                })
                if (count === loops.story.files.length) {
                    loops._uiElements.btnPlayAll.disabled = false;
                }
            });
    },
    mix: function() {
        loops.story.scrollTrack.forEach(function(item, itemIndex) {
            const currentScrollTrack = loops.getCurrentScrollTrackPosition();
            if (currentScrollTrack >= item.scrollRange[0] && currentScrollTrack <= item.scrollRange[1]) {
                item.jobs.forEach(function(job, jobIndex) {
                    if (!loops.story._filesById[job.id].loop && !loops.story._filesById[job.id].isPlaying) {
                        loops.play(job.id);
                    }
                    switch (job.interface) {
                        case 'gains':
                            const jobTfnData = loops._tfnsData[itemIndex].jobs[jobIndex];
                            const currentGain = currentScrollTrack * jobTfnData.slope + jobTfnData.intercept;
                            // console.log(window.scrollY, job.id, currentGain);
                            loops.gains[job.id].gain.value = currentGain;
                            break;
                    }
                });
            }
        });
        // loops.controlRoom();
    },
    _computeScrollTrackJobs: function() {
        loops.story.scrollTrack.forEach(function(item) {
            const jobsData = {jobs: []};
            item.jobs.forEach(function(job) {
                const   slope = (job.valueRange[1] - job.valueRange[0]) / (item.scrollRange[1] - item.scrollRange[0]),
                        intercept = job.valueRange[1] - slope * item.scrollRange[1];
                jobsData.jobs.push({slope, intercept});
            });
            loops._tfnsData.push(jobsData);
        });
    },
    getCurrentScrollTrackPosition: function() {
        return 100 * window.scrollY / (document.body.clientHeight - window.innerHeight);
    },
    _tfnsData: [],
    play(name) {
        // const source = context.createBufferSource();
        // source.buffer = audioBuffer;
        // source.connect(context.destination);
        // source.start();
        // Source
        loops.sources[name] = loops.contexts[name].createBufferSource();
        loops.sources[name].buffer = loops.buffers[name];
        loops.sources[name].loop = loops.story._filesById[name].loop;
        
        // Create a stereo panner
        loops.stereoPanners[name] = loops.contexts[name].createStereoPanner();
        // Create Gain
        loops.gains[name] = loops.contexts[name].createGain();
        loops.gains[name].gain.value = 0;

loops.sources[name]
            .connect(loops.gains[name])
            .connect(loops.stereoPanners[name])
            .connect(loops.contexts[name].destination);
        // If no gainNode
        // loops.audioSources[name].connect(loops.audioContexts[name].destination);
        if (loops.story._filesById[name].initialForcedStop) {
            loops.sources[name].addEventListener("ended", (evt) => {
                console.log(name, 'stopped', evt);
                loops.story._filesById[name].isPlaying = false;
                loops.story._filesById[name].hasPlayed = true;
                // loops.controlRoom();
            });
        }

if (loops.story._filesById[name].isPlaying) {
            console.log(name+ ' is playing!')
            
        } else {
            loops.sources[name].start();
            loops.story._filesById[name].isPlaying = true;
        }
        // loops.controlRoom();
        
        
    },
    stop: function(name) {
        if (loops.story._filesById[name].isPlaying) loops.sources[name].stop();
        loops.story._filesById[name].isPlaying = false;
    },
    playAll: function() {
        window.addEventListener('scroll', loops.mix);
        // Play all
        Object.keys(loops.contexts).forEach(function(name) {
            loops.play(name);
        });

// But stop non loop audio
        Object.keys(loops.story._filesById).forEach(function(name) {
            if (!loops.story._filesById[name].loop) {
                loops.stop(name);
                loops.story._filesById[name].initialForcedStop = true;
            }
        });

loops.mix();

loops._uiElements.btnStopAll.style.display = null;
        loops._uiElements.btnPlayAll.style.display = 'none';
    },
    stopAll: function() {
        Object.keys(loops.contexts).forEach(function(name) {
            loops.stop(name);
        });
        window.removeEventListener('scroll', loops.mix);
        loops._uiElements.btnStopAll.style.display = 'none';
        loops._uiElements.btnPlayAll.style.display = null;
    },
    muteAll: function() {
        Object.keys(loops.contexts).forEach(function(name) {
            loops.mute(name);
        });
    },
    unMuteAll: function() {
        Object.keys(loops.contexts).forEach(function(name) {
            loops.unMute(name);
        });
    },
    _uiElements: {},

_isArray: function(data) {
        let response = false;
        if (typeof data == 'object') {
            if (Object.prototype.toString.call(data) === '[object Array]') {
                response = true;
            }
        };
        return response;
    },
    _createUIParametersAreOK: function(data) {
        let response = false;
        if (typeof data.name == 'string'
            && typeof data.parentName == 'string'
            && typeof data.htmlContent == 'string'
            && typeof data.elType == 'string'
            && loops._isArray(data.elAttributes)
            && typeof loops._uiElements[data.name] === 'undefined') {
            response = true;
        }
        return response;
    },
    _createUI: function({name, parentName, htmlContent, elType, elAttributes}) {
        if (loops._createUIParametersAreOK({name, parentName, htmlContent, elType, elAttributes})) {
            loops._uiElements[name] = document.createElement(elType);
            const newUIElement = loops._uiElements[name];
            newUIElement.id = `loops_${name}`;
            elAttributes.forEach(function(attr) {
                newUIElement.setAttribute(attr.name, attr.value);
            })
            newUIElement.innerHTML = htmlContent;
            const elUiParent = loops._uiElements[parentName];
            if (typeof elUiParent == 'object') {
                elUiParent.appendChild(newUIElement);
            }
            newUIElement.querySelectorAll('[data-ui-element]').forEach(function(el) {
                const uiName = el.dataset.uiElement;
                loops._uiElements[uiName] = el;
                if (loops._uiElements[uiName].id == '') loops._uiElements[uiName].id = `loops_${uiName}`;
            })
        }
    },
    setGain: function(name, value) {
        loops.gains[name].gain.value = value;
    },
    update: function() {
        // Create root element
        loops._uiElements.root = document.querySelector('#audio_commands');
        loops._createUI({
            name: 'audioCommands',
            parentName: 'root',
            htmlContent: `
                <button type="button"
                    class="p-5 | ff-700 fs-4 | c-neutral-100 bc-0 b-0 cur-pointer"
                    onclick="loops.playAll()"
                    data-ui-element="btnPlayAll"
                    title="Play Breaking Bad’s Theme compoosed by Dave Porter"
                    disabled>
                    <span class="c-secondary-100">P</span>lay <span class="c-secondary-100">Th</span>eme
                </button>
                <button type="button"
                    class="p-5 | ff-700 fs-4 | c-neutral-100 bc-0 b-0 cur-pointer"
                    onclick="loops.stopAll()"
                    data-ui-element="btnStopAll"
                    title="Stop Breaking Bad’s Theme"
                    style="display: none">
                    St<span class="c-secondary-100">O</span>p
                </button>
            `,
            elType: 'nav',
            elAttributes: [
                { name: 'class', value: 'd-flex ai-center' }
            ]
        });
        fetch('https://cdn.jsdelivr.net/gh/olivier3lanc/cinematics-resources/breaking_bad_intro/loops.json')
            .then(response => response.json())
            .then(json => {
                loops.story = json;
                loops.story._filesById = {};
                loops.story.files.forEach(function(file) {
                    loops.story._filesById[file.id] = {
                        loop: file.loop,
                        isPlaying: false,
                        isLoaded: false,
                        hasPlayed: false
                    };
                    loops.createAudio(file.path, file.id);
                });
                loops._computeScrollTrackJobs();
            })
            .catch(error => {
                // Handle the error
                console.log(error)
            });
    },
    mute: function(name) {
        loops.gains[name].gain.value = 0;
    },
    unMute: function(name) {
        loops.gains[name].gain.value = 1;
    }
}
loops.update();

// Breaking Bad Intro
const bb = {
    elTable1: document.querySelector('[scroll-btween="table1"]'),
    elTable2: document.querySelector('[scroll-btween="table2"]'),
    elFormulaes: document.querySelector('[scroll-btween="formulaes"]'),
    elSmokes: document.querySelectorAll('.smoke'),
    isFullscreen: false,
    data: [
        // Br group 17
        {
            target: 'elTable1',
            atomic_mass: 79.904,
            number: 35,
            symbol: 'Br',
            shells: [
                2,
                8,
                18,
                7
            ],
            oxidation_states: [
                '+5',
                '+3',
                '+1',
                '-1'
            ],
            top: '0%',
            left: '0%'
        },
        {
            target: 'elTable1',
            atomic_mass: 126.904473,
            number: 53,
            symbol: 'I',
            shells: [
                2,
                8,
                18,
                18,
                7
            ],
            oxidation_states: [
                '+7',
                '+5',
                '+3',
                '+1',
                '-1'
            ],
            top: 'calc(100% + 2px)',
            left: '0%'
        },
        {
            target: 'elTable1',
            atomic_mass: 35.45,
            number: 17,
            symbol: 'Cl',
            shells: [
                2,
                8,
                7
            ],
            oxidation_states: [
                '+5',
                '+3',
                '+1',
                '-1',
            ],
            top: 'calc(-100% - 2px)',
            left: '0%'
        },
        {
            target: 'elTable1',
            atomic_mass: 18.9984031636,
            number: 9,
            symbol: 'F',
            shells: [
                2,
                7
            ],
            oxidation_states: [
                '-1',
            ],
            top: 'calc(-200% - 4px)',
            left: '0%'
        },
        {
            target: 'elTable1',
            atomic_mass: 210,
            number: 85,
            symbol: 'At',
            shells: [
                2,
                8,
                18,
                32,
                18,
                7
            ],
            oxidation_states: [
                '+1',
                '-1',
            ],
            top: 'calc(200% + 4px)',
            left: '0%'
        },
        // group 18
        {
            target: 'elTable1',
            atomic_mass: 4.0026022,
            number: 2,
            symbol: 'He',
            shells: [
                2
            ],
            oxidation_states: [],
            top: 'calc(-300% - 6px)',
            left: 'calc(100% + 2px)'
        },
        {
            target: 'elTable1',
            atomic_mass: 20.17976,
            number: 10,
            symbol: 'Ne',
            shells: [
                2,
                8
            ],
            oxidation_states: [],
            top: 'calc(-200% - 4px)',
            left: 'calc(100% + 2px)'
        },
        {
            target: 'elTable1',
            atomic_mass: 39.9481,
            number: 18,
            symbol: 'Ar',
            shells: [
                2,
                8,
                8
            ],
            oxidation_states: [],
            top: 'calc(-100% - 2px)',
            left: 'calc(100% + 2px)'
        },
        {
            target: 'elTable1',
            atomic_mass: 83.7982,
            number: 36,
            symbol: 'Kr',
            shells: [
                2,
                8,
                18,
                8
            ],
            oxidation_states: [
                '+2'
            ],
            top: '0%',
            left: 'calc(100% + 2px)'
        },
        {
            target: 'elTable1',
            atomic_mass: 131.2936,
            number: 54,
            symbol: 'Xe',
            shells: [
                2,
                8,
                18,
                18,
                8
            ],
            oxidation_states: [
                '+8',
                '+6',
                '+4',
                '+2'
            ],
            top: 'calc(100% + 2px)',
            left: 'calc(100% + 2px)'
        },
        {
            target: 'elTable1',
            atomic_mass: 222,
            number: 86,
            symbol: 'Rn',
            shells: [
                2,
                8,
                18,
                32,
                18,
                8
            ],
            oxidation_states: [],
            top: 'calc(200% + 4px)',
            left: 'calc(100% + 2px)'
        },
        // group 16
        {
            target: 'elTable1',
            atomic_mass: 15.999,
            number: 8,
            symbol: 'O',
            shells: [
                2,
                6
            ],
            oxidation_states: [
                '-2'
            ],
            top: 'calc(-200% - 4px)',
            left: 'calc(-100% - 2px)'
        },
        {
            target: 'elTable1',
            atomic_mass: 32.06,
            number: 16,
            symbol: 'S',
            shells: [
                2,
                8,
                6
            ],
            oxidation_states: [
                '+6',
                '+4',
                '+2',
                '-2'
            ],
            top: 'calc(-100% - 2px)',
            left: 'calc(-100% - 2px)'
        },
        {
            target: 'elTable1',
            atomic_mass: 78.9718,
            number: 34,
            symbol: 'Se',
            shells: [
                2,
                8,
                18,
                6
            ],
            oxidation_states: [
                '+6',
                '+4',
                '+2',
                '-2'
            ],
            top: '0%',
            left: 'calc(-100% - 2px)'
        },
        {
            target: 'elTable1',
            atomic_mass: 127.603,
            number: 52,
            symbol: 'Te',
            shells: [
                2,
                8,
                18,
                18,
                6
            ],
            oxidation_states: [
                '+6',
                '+4',
                '+2',
                '-2'
            ],
            top: 'calc(100% + 2px)',
            left: 'calc(-100% - 2px)'
        },
        {
            target: 'elTable1',
            atomic_mass: 209,
            number: 84,
            symbol: 'Po',
            shells: [
                2,
                8,
                18,
                32,
                18,
                6
            ],
            oxidation_states: [
                '+4',
                '+2',
                '-2'
            ],
            top: 'calc(200% + 4px)',
            left: 'calc(-100% - 2px)'
        },
        // group 15
        {
            target: 'elTable1',
            atomic_mass: 14.007,
            number: 7,
            symbol: 'N',
            shells: [
                2,
                5
            ],
            oxidation_states: [
                '+5',
                '+3',
                '-3'
            ],
            top: 'calc(-200% - 4px)',
            left: 'calc(-200% - 4px)'
        },
        {
            target: 'elTable1',
            atomic_mass: 30.9737619985,
            number: 15,
            symbol: 'P',
            shells: [
                2,
                8,
                5
            ],
            oxidation_states: [
                '+5',
                '+3',
                '-3'
            ],
            top: 'calc(-100% - 2px)',
            left: 'calc(-200% - 4px)'
        },
        {
            target: 'elTable1',
            atomic_mass: 74.9215956,
            number: 33,
            symbol: 'As',
            shells: [
                2,
                8,
                18,
                5
            ],
            oxidation_states: [
                '+5',
                '+3',
                '-3'
            ],
            top: '0%',
            left: 'calc(-200% - 4px)'
        },
        {
            target: 'elTable1',
            atomic_mass: 121.7601,
            number: 51,
            symbol: 'Sb',
            shells: [
                2,
                8,
                18,
                18,
                5
            ],
            oxidation_states: [
                '+5',
                '+3',
                '-3'
            ],
            top: 'calc(100% + 2px)',
            left: 'calc(-200% - 4px)'
        },
        {
            target: 'elTable1',
            atomic_mass: 208.980401,
            number: 83,
            symbol: 'Bi',
            shells: [
                2,
                8,
                18,
                32,
                18,
                5
            ],
            oxidation_states: [
                '+3'
            ],
            top: 'calc(200% + 4px)',
            left: 'calc(-200% - 4px)'
        },
        // group 14
        {
            target: 'elTable1',
            atomic_mass: 12.011,
            number: 6,
            symbol: 'C',
            shells: [
                2,
                4
            ],
            oxidation_states: [
                '+4',
                '-4'
            ],
            top: 'calc(-200% - 4px)',
            left: 'calc(-300% - 6px)'
        },
        {
            target: 'elTable1',
            atomic_mass: 28.085,
            number: 14,
            symbol: 'Si',
            shells: [
                2,
                8,
                4
            ],
            oxidation_states: [
                '+4',
                '-4'
            ],
            top: 'calc(-100% - 2px)',
            left: 'calc(-300% - 6px)'
        },
        {
            target: 'elTable1',
            atomic_mass: 72.6308,
            number: 32,
            symbol: 'Ge',
            shells: [
                2,
                8,
                18,
                4
            ],
            oxidation_states: [
                '+4',
                '-4'
            ],
            top: '0%',
            left: 'calc(-300% - 6px)'
        },
        {
            target: 'elTable1',
            atomic_mass: 118.7107,
            number: 50,
            symbol: 'Sn',
            shells: [
                2,
                8,
                18,
                18,
                4
            ],
            oxidation_states: [
                '+4',
                '+2',
                '-4'
            ],
            top: 'calc(100% + 2px)',
            left: 'calc(-300% - 6px)'
        },
        {
            target: 'elTable1',
            atomic_mass: 207.21,
            number: 82,
            symbol: 'Pb',
            shells: [
                2,
                8,
                18,
                32,
                18,
                4
            ],
            oxidation_states: [
                '+4',
                '+2'
            ],
            top: 'calc(200% + 4px)',
            left: 'calc(-300% - 6px)'
        },
        // group 13
        {
            target: 'elTable1',
            atomic_mass: 10.81,
            number: 5,
            symbol: 'B',
            shells: [
                2,
                3
            ],
            oxidation_states: [
                '+3'
            ],
            top: 'calc(-200% - 4px)',
            left: 'calc(-400% - 8px)'
        },
        {
            target: 'elTable1',
            atomic_mass: 26.98153857,
            number: 13,
            symbol: 'Al',
            shells: [
                2,
                8,
                3
            ],
            oxidation_states: [
                '+3'
            ],
            top: 'calc(-100% - 2px)',
            left: 'calc(-400% - 8px)'
        },
        {
            target: 'elTable1',
            atomic_mass: 69.7231,
            number: 31,
            symbol: 'Ga',
            shells: [
                2,
                8,
                18,
                3
            ],
            oxidation_states: [
                '+3'
            ],
            top: '0%',
            left: 'calc(-400% - 8px)'
        },
        {
            target: 'elTable1',
            atomic_mass: 114.8181,
            number: 49,
            symbol: 'In',
            shells: [
                2,
                8,
                18,
                18,
                3
            ],
            oxidation_states: [
                '+3'
            ],
            top: 'calc(100% + 2px)',
            left: 'calc(-400% - 8px)'
        },
        {
            target: 'elTable1',
            atomic_mass: 204.38,
            number: 81,
            symbol: 'Tl',
            shells: [
                2,
                8,
                18,
                32,
                18,
                3
            ],
            oxidation_states: [
                '+3',
                '+1'
            ],
            top: 'calc(200% + 4px)',
            left: 'calc(-400% - 8px)'
        },
        // Ba Group 2
        {
            target: 'elTable2',
            atomic_mass: 137.3277,
            number: 56,
            symbol: 'Ba',
            shells: [
                2,
                8,
                18,
                18,
                8,
                2
            ],
            oxidation_states: [
                '+2'
            ],
            top: '0%',
            left: '0%'
        },
        {
            target: 'elTable2',
            atomic_mass: 226,
            number: 88,
            symbol: 'Ra',
            shells: [
                2,
                8,
                18,
                32,
                18,
                8,
                2
            ],
            oxidation_states: [
                '+2'
            ],
            top: 'calc(100% + 2px)',
            left: '0%'
        },
        {
            target: 'elTable2',
            atomic_mass: 87.621,
            number: 38,
            symbol: 'Sr',
            shells: [
                2,
                8,
                18,
                8,
                2
            ],
            oxidation_states: [
                '+2'
            ],
            top: 'calc(-100% - 2px)',
            left: '0%'
        },
        {
            target: 'elTable2',
            atomic_mass: 40.0784,
            number: 20,
            symbol: 'Ca',
            shells: [
                2,
                8,
                8,
                2
            ],
            oxidation_states: [
                '+2'
            ],
            top: 'calc(-200% - 4px)',
            left: '0%'
        },
        {
            target: 'elTable2',
            atomic_mass: 24.305,
            number: 12,
            symbol: 'Mg',
            shells: [
                2,
                8,
                2
            ],
            oxidation_states: [
                '+2'
            ],
            top: 'calc(-300% - 6px)',
            left: '0%'
        },
        {
            target: 'elTable2',
            atomic_mass: 9.01218315,
            number: 4,
            symbol: 'Be',
            shells: [
                2,
                2
            ],
            oxidation_states: [
                '+2'
            ],
            top: 'calc(-400% - 8px)',
            left: '0%'
        },
        // Ba Group 1
        {
            target: 'elTable2',
            atomic_mass: 6.94,
            number: 3,
            symbol: 'Li',
            shells: [
                2,
                1
            ],
            oxidation_states: [
                '+1'
            ],
            top: 'calc(-400% - 8px)',
            left: 'calc(-100% - 2px)'
        },
        {
            target: 'elTable2',
            atomic_mass: 22.989769282,
            number: 11,
            symbol: 'Na',
            shells: [
                2,
                8,
                1
            ],
            oxidation_states: [
                '+1'
            ],
            top: 'calc(-300% - 6px)',
            left: 'calc(-100% - 2px)'
        },
        {
            target: 'elTable2',
            atomic_mass: 39.09831,
            number: 19,
            symbol: 'K',
            shells: [
                2,
                8,
                8,
                2
            ],
            oxidation_states: [
                '+1'
            ],
            top: 'calc(-200% - 4px)',
            left: 'calc(-100% - 2px)'
        },
        {
            target: 'elTable2',
            atomic_mass: 85.46783,
            number: 37,
            symbol: 'Rb',
            shells: [
                2,
                8,
                18,
                8,
                1
            ],
            oxidation_states: [
                '+1'
            ],
            top: 'calc(-100% - 2px)',
            left: 'calc(-100% - 2px)'
        },
        {
            target: 'elTable2',
            atomic_mass: 132.905451966,
            number: 55,
            symbol: 'Cs',
            shells: [
                2,
                8,
                18,
                18,
                8,
                1
            ],
            oxidation_states: [
                '+1'
            ],
            top: '0%',
            left: 'calc(-100% - 2px)'
        },
        {
            target: 'elTable2',
            atomic_mass: 6.94,
            number: 3,
            symbol: 'Li',
            shells: [
                2,
                1
            ],
            oxidation_states: [
                '+1'
            ],
            top: 'calc(-400% - 8px)',
            left: 'calc(-100% - 2px)'
        },
        {
            target: 'elTable2',
            atomic_mass: 223,
            number: 87,
            symbol: 'Fr',
            shells: [
                2,
                8,
                18,
                32,
                18,
                8,
                1
            ],
            oxidation_states: [
                '+1'
            ],
            top: 'calc(100% + 2px)',
            left: 'calc(-100% - 2px)'
        },
        {
            target: 'elTable2',
            atomic_mass: 1.008,
            number: 1,
            symbol: 'H',
            shells: [
                1
            ],
            oxidation_states: [
                '+1',
                '-1'
            ],
            top: 'calc(-500% - 10px)',
            left: 'calc(-100% - 2px)'
        },
        // Group 3
        {
            target: 'elTable2',
            atomic_mass: 44.9559085,
            number: 21,
            symbol: 'Sc',
            shells: [
                2,
                8,
                9,
                2
            ],
            oxidation_states: [
                '+3'
            ],
            top: 'calc(-200% - 4px)',
            left: 'calc(100% + 2px)'
        },
        {
            target: 'elTable2',
            atomic_mass: 88.905842,
            number: 39,
            symbol: 'Y',
            shells: [
                2,
                8,
                18,
                9,
                2
            ],
            oxidation_states: [
                '+3'
            ],
            top: 'calc(-100% - 2px)',
            left: 'calc(100% + 2px)'
        },
        {
            target: 'elTable2',
            atomic_mass: 174.96681,
            number: 71,
            symbol: 'Lu',
            shells: [
                2,
                8,
                18,
                32,
                9,
                2
            ],
            oxidation_states: [
                '+3'
            ],
            top: '0%',
            left: 'calc(100% + 2px)'
        },
        {
            target: 'elTable2',
            atomic_mass: 266,
            number: 103,
            symbol: 'Lr',
            shells: [
                2,
                8,
                18,
                32,
                9,
                2
            ],
            oxidation_states: [
                '+3'
            ],
            top: 'calc(100% + 2px)',
            left: 'calc(100% + 2px)'
        },
        // Group 4
        {
            target: 'elTable2',
            atomic_mass: 47.8671,
            number: 22,
            symbol: 'Ti',
            shells: [
                2,
                8,
                10,
                2
            ],
            oxidation_states: [
                '+4'
            ],
            top: 'calc(-200% - 4px)',
            left: 'calc(200% + 4px)'
        },
        {
            target: 'elTable2',
            atomic_mass: 91.2242,
            number: 40,
            symbol: 'Zr',
            shells: [
                2,
                8,
                18,
                10,
                2
            ],
            oxidation_states: [
                '+4'
            ],
            top: 'calc(-100% - 2px)',
            left: 'calc(200% + 4px)'
        },
        {
            target: 'elTable2',
            atomic_mass: 178.492,
            number: 72,
            symbol: 'Hf',
            shells: [
                2,
                8,
                18,
                32,
                10,
                2
            ],
            oxidation_states: [
                '+4'
            ],
            top: '0%',
            left: 'calc(200% + 4px)'
        },
        {
            target: 'elTable2',
            atomic_mass: 267,
            number: 104,
            symbol: 'Rf',
            shells: [
                2,
                8,
                18,
                32,
                32,
                10,
                2
            ],
            oxidation_states: [
                '+4'
            ],
            top: 'calc(100% + 2px)',
            left: 'calc(200% + 4px)'
        },
        // Group 5
        {
            target: 'elTable2',
            atomic_mass: 50.94151,
            number: 23,
            symbol: 'V',
            shells: [
                2,
                8,
                11,
                2
            ],
            oxidation_states: [
                '+5'
            ],
            top: 'calc(-200% - 4px)',
            left: 'calc(300% + 6px)'
        },
        {
            target: 'elTable2',
            atomic_mass: 92.906372,
            number: 41,
            symbol: 'Nb',
            shells: [
                2,
                8,
                18,
                12,
                1
            ],
            oxidation_states: [
                '+5'
            ],
            top: 'calc(-100% - 2px)',
            left: 'calc(300% + 6px)'
        },
        {
            target: 'elTable2',
            atomic_mass: 180.947882,
            number: 73,
            symbol: 'Ta',
            shells: [
                2,
                8,
                18,
                32,
                11,
                2
            ],
            oxidation_states: [
                '+5'
            ],
            top: '0%',
            left: 'calc(300% + 6px)'
        },
        {
            target: 'elTable2',
            atomic_mass: 268,
            number: 105,
            symbol: 'Db',
            shells: [
                2,
                8,
                18,
                32,
                32,
                11,
                2
            ],
            oxidation_states: [
                '+5'
            ],
            top: 'calc(100% + 2px)',
            left: 'calc(300% + 6px)'
        },
        // Group 6
        {
            target: 'elTable2',
            atomic_mass: 51.99616,
            number: 24,
            symbol: 'Cr',
            shells: [
                2,
                8,
                13,
                1
            ],
            oxidation_states: [
                '+6',
                '+3'
            ],
            top: 'calc(-200% - 4px)',
            left: 'calc(400% + 8px)'
        },
        {
            target: 'elTable2',
            atomic_mass: 95.951,
            number: 42,
            symbol: 'Mo',
            shells: [
                2,
                8,
                18,
                13,
                1
            ],
            oxidation_states: [
                '+6',
                '+4'
            ],
            top: 'calc(-100% - 2px)',
            left: 'calc(400% + 8px)'
        },
        {
            target: 'elTable2',
            atomic_mass: 183.841,
            number: 74,
            symbol: 'W',
            shells: [
                2,
                8,
                18,
                32,
                12,
                2
            ],
            oxidation_states: [
                '+6',
                '+4'
            ],
            top: '0%',
            left: 'calc(400% + 8px)'
        },
        {
            target: 'elTable2',
            atomic_mass: 269,
            number: 106,
            symbol: 'Sg',
            shells: [
                2,
                8,
                18,
                32,
                32,
                12,
                2
            ],
            oxidation_states: [
                '+6'
            ],
            top: 'calc(100% + 2px)',
            left: 'calc(400% + 8px)'
        },
        // Group 7
        {
            target: 'elTable2',
            atomic_mass: 54.9380443,
            number: 25,
            symbol: 'Mn',
            shells: [
                2,
                8,
                13,
                2
            ],
            oxidation_states: [
                '+7',
                '+4',
                '+2'
            ],
            top: 'calc(-200% - 4px)',
            left: 'calc(500% + 10px)'
        },
        {
            target: 'elTable2',
            atomic_mass: 98,
            number: 43,
            symbol: 'Tc',
            shells: [
                2,
                8,
                18,
                13,
                2
            ],
            oxidation_states: [
                '+7',
                '+4'
            ],
            top: 'calc(-100% - 2px)',
            left: 'calc(500% + 10px)'
        },
        {
            target: 'elTable2',
            atomic_mass: 186.2071,
            number: 75,
            symbol: 'Re',
            shells: [
                2,
                8,
                18,
                32,
                13,
                2
            ],
            oxidation_states: [
                '+7',
                '+4'
            ],
            top: '0%',
            left: 'calc(500% + 10px)'
        },
        {
            target: 'elTable2',
            atomic_mass: 270,
            number: 107,
            symbol: 'Bh',
            shells: [
                2,
                8,
                18,
                32,
                32,
                13,
                2
            ],
            oxidation_states: [
                '+7'
            ],
            top: 'calc(100% + 2px)',
            left: 'calc(500% + 10px)'
        }
    ],
    toggleFullScreen: function(elem) {
        const elDoc = document.documentElement;
        if (!document.fullscreenElement) {
            if (elDoc.requestFullscreen) {
                elDoc.requestFullscreen();
            } else if (elDoc.msRequestFullscreen) {
                elDoc.msRequestFullscreen();
            } else if (elDoc.mozRequestFullScreen) {
                elDoc.mozRequestFullScreen();
            } else if (elDoc.webkitRequestFullscreen) {
                elDoc.webkitRequestFullscreen();
            }
            elem.innerHTML = `Exit <span class="c-secondary-100">F</span>ullsreen`;
        } else {
            if (document.exitFullscreen) {
                document.exitFullscreen();
                elem.innerHTML = `Enter full<span class="c-secondary-100">Sc</span>reen`;
            }
        }
    },
    templates: {
        singleElement: function({atomic_mass, symbol, number, shells, oxidation_states, top, left}) {
            return `
                <span class="d-flex | pos-absolute top-0 left-0 | p-8 ar-1 | outl-1"
                    p-7="xs"
                    style="top: ${top}; left: ${left}">
                    <span class="d-flex jc-space-between | pos-absolute top-0 left-0 | w-100 p-1">
                        <code class="ff-400 fs-1">${atomic_mass}</code>
                        <code class="maxw-2ch | ff-400 fs-1">${oxidation_states}</code>
                    </span>
                    <span class="d-flex fd-column | pos-absolute bottom-0 left-0 | p-1 | fs-2">
                        <span class="d-flex fd-column">
                            <code class="ff-700">${number}</code>
                            <code class="ff-400 fs-1">${shells}</code>
                        </span>
                    </span>
                    <span class="pos-absolute top-50 left-50 t-tY-50 t-tX-50 | mt-offset-1 | ff-700 fs-8 ta-center" fs-7="xs">${symbol}</span>
                </span>
            `;
        }
    },
    run: function() {
        bb.data.forEach(element => {
            bb[element.target].innerHTML += bb.templates.singleElement({
                atomic_mass: element.atomic_mass,
                symbol: element.symbol,
                number: element.number,
                shells: element.shells.toString().replaceAll(',', '-'),
                oxidation_states: element.oxidation_states.toString().replaceAll(',', ' '),
                top: element.top,
                left: element.left
            })
        });
        window.addEventListener('scroll', bb.handlers.formulaes);
    },
    getCurrentScrollTrackPosition: function() {
        return 100 * window.scrollY / (document.body.clientHeight - window.innerHeight);
    },
    handlers: {
        formulaes: function() {
            if (bb.getCurrentScrollTrackPosition() > 12) {
                bb.elFormulaes.classList.add('__stop_animations');
            } else {
                bb.elFormulaes.classList.remove('__stop_animations');
            }
        }
    }
}
bb.run();

Frontend Forever App